<template>
  <div class="layout-judge-container">
    <!-- 搜索区域 -->
    <div class="search-panel">
      <div class="search-row">
        <div class="search-item">
          <span class="label">时间</span>
          <el-date-picker v-model="searchParams.dateRange" type="datetimerange" range-separator="至" start-placeholder="开始时间"
            end-placeholder="结束时间" class="custom-date-picker" />
        </div>
        <div class="search-item range-item">
          <span class="label">成品厚度</span>
          <el-input v-model="searchParams.prodThicknessMin" placeholder="最小值" class="range-input" />
          <span class="separator">-</span>
          <el-input v-model="searchParams.prodThicknessMax" placeholder="最大值" class="range-input" />
        </div>
        <div class="search-item range-item">
          <span class="label">成品宽度</span>
          <el-input v-model="searchParams.prodWidthMin" placeholder="最小值" class="range-input" />
          <span class="separator">-</span>
          <el-input v-model="searchParams.prodWidthMax" placeholder="最大值" class="range-input" />
        </div>
         <div class="search-item range-item">
          <span class="label">原料厚度</span>
          <el-input v-model="searchParams.materialThicknessMin" placeholder="最小值" class="range-input" />
          <span class="separator">-</span>
          <el-input v-model="searchParams.materialThicknessMax" placeholder="最大值" class="range-input" />
        </div>
        <div class="search-item">
          <span class="label">钢种</span>
          <el-select v-model="searchParams.steelGrade" placeholder="请选择" clearable class="custom-select">
            <el-option label="SPCC-Z" value="SPCC-Z" />
            <el-option label="SPCC-Y" value="SPCC-Y" />
            <el-option label="DC01" value="DC01" />
          </el-select>
        </div>

      </div>
      <div class="search-row">
         <div class="search-item">
          <span class="label">出口卷号</span>
          <el-input v-model="searchParams.exportRollNo" placeholder="请输入" class="custom-input" />
        </div>
        <div class="search-item">
          <span class="label">入口卷号</span>
          <el-input v-model="searchParams.entryRollNo" placeholder="请输入" class="custom-input" />
        </div>
         <div class="search-actions">
          <button class="btn query-btn" @click="handleSearch">查询</button>
          <button class="btn reset-btn" @click="handleReset">重置</button>
          <button class="btn export-btn">导出</button>
        </div>
      </div>
    </div>

    <!-- 主要内容区域 (包含表格+详情 和 列选择器) -->
    <div class="resizable-area-wrapper">
      <!-- 左侧：表格 + 分页 + (可选)详情 -->
      <div class="table-content-wrapper">
        <!-- 上部：表格 + 分页 -->
        <div class="top-panel-wrapper" ref="topPanelRef">
          <div class="table-panel">
            <el-table
              :data="allTableData"
              height="100%"
              border
              highlight-current-row
              :row-class-name="tableRowClassName"
              @row-click="selectRow"
              :header-cell-style="{ background: '#2a5caa', color: '#fff', padding: '8px 10px', textAlign: 'center', fontWeight: 'normal', border: 'none' }"
              :cell-style="{ padding: '8px 10px', textAlign: 'center', color: '#c0c4cc', border: 'none' }"
              :row-style="{ background: '#0f2142' }"
            >
             <!-- Columns definition -->
              <el-table-column type="index" label="序号" width="80" align="center" fixed="left" />
              <el-table-column prop="exportRollNo" label="酸轧出口卷号" width="160" align="center" />
              <el-table-column prop="entryRollNo" label="酸轧入口卷号" width="160" align="center" />
              <el-table-column prop="prodLine" label="产线" width="80" align="center" />
              <el-table-column prop="steelGrade" label="钢种" width="100" align="center" />
              <el-table-column prop="prodThickness" label="成品厚度[mm]" width="140" align="center" />
              <el-table-column prop="prodWidth" label="成品宽度[mm]" width="140" align="center" />
              <el-table-column prop="prodLength" label="成品长度[m]" width="140" align="center" />
              <el-table-column prop="clostFlag" label="综合判定" width="140" align="center" >
                <template #default="scope">
                  <span :class="getOverallResultClass(scope.row)">
                    {{ scope.row.clostFlag==0?'OK':'NO' }}
                  </span>
              </template>
              </el-table-column>
              <el-table-column prop="driveSideWave" label="传动侧边浪" width="140" align="center" />
              <el-table-column prop="opSideWave" label="操作侧边浪" width="140" align="center" />
              <el-table-column label="超差长度[m]" align="center">
                <el-table-column prop="flataveAlarmLengthHead" label="头部" width="80" align="center" />
                <el-table-column prop="flataveAlarmLengthMiddle" label="本体" width="80" align="center" />
                <el-table-column prop="flataveAlarmLengthTail" label="尾部" width="80" align="center" />
                <el-table-column prop="flatRibbedAvgOppositeSign" label="两侧均值反向长度" width="170" align="center" />
                <el-table-column prop="flatRibbedDiffer10" label="两侧幅值差大于10长度" width="190" align="center" />
                <el-table-column prop="flatBiggerThanMaxLength" label="报警长度" width="120" align="center" />
              </el-table-column>
              <el-table-column prop="enWidth" label="原料宽度[mm]" width="140" align="center" />
              <el-table-column prop="enThickness" label="原料厚度[mm]" width="140" align="center" />
              <el-table-column prop="headJifen" label="头部积分值" width="140" align="center" />
              <el-table-column prop="midJifen" label="中部积分值" width="140" align="center" />
              <el-table-column prop="tailJifen" label="尾部积分值" width="140" align="center" />
              <el-table-column prop="ascDesc" label="板形描述" width="200" align="center" />
              <el-table-column prop="prodEndTime" label="生产完成时间" width="160" align="center">
              <template #default="scope">
                {{ formatDateTime(scope.row.prodEndTime) }}
              </template>
            </el-table-column>
              <el-table-column v-if="isColumnVisible('ascLength')" prop="ascLength" label="板形数据长度" width="130" align="center" />
              <el-table-column v-if="isColumnVisible('class1')" prop="class1" label="分类class1长度[m]" width="170" align="center" />
              <el-table-column v-if="isColumnVisible('class2')" prop="class2" label="分类class2长度[m]" width="170" align="center" />
              <el-table-column v-if="isColumnVisible('class3')" prop="class3" label="分类class3长度[m]" width="170" align="center" />
              <el-table-column v-if="isColumnVisible('class4')" prop="class4" label="分类class4长度[m]" width="170" align="center" />
              <el-table-column v-if="isColumnVisible('class5')" prop="class5" label="分类class5长度[m]" width="170" align="center" />
              <el-table-column v-if="isColumnVisible('class6')" prop="class6" label="分类class6长度[m]" width="170" align="center" />
              <el-table-column v-if="isColumnVisible('class7')" prop="class7" label="分类class7长度[m]" width="170" align="center" />
              <el-table-column v-if="isColumnVisible('classRate1')" prop="classRate1" label="分类class1占比[%]" width="170" align="center" />
              <el-table-column v-if="isColumnVisible('classRate2')" prop="classRate2" label="分类class2占比[%]" width="170" align="center" />
              <el-table-column v-if="isColumnVisible('classRate3')" prop="classRate3" label="分类class3占比[%]" width="170" align="center" />
              <el-table-column v-if="isColumnVisible('classRate4')" prop="classRate4" label="分类class4占比[%]" width="170" align="center" />
              <el-table-column v-if="isColumnVisible('classRate5')" prop="classRate5" label="分类class5占比[%]" width="170" align="center" />
              <el-table-column v-if="isColumnVisible('classRate6')" prop="classRate6" label="分类class6占比[%]" width="170" align="center" />
              <el-table-column v-if="isColumnVisible('classRate7')" prop="classRate7" label="分类class7占比[%]" width="170" align="center" />
              
              <el-table-column label="详情" width="260" fixed="right" align="center">
                <template #default="scope">
                  <button class="action-btn rate-btn" @click="openDialog(scope.row)">详情</button>
                  <button class="action-btn abnormal-btn" @click="openAbnormalDialog(scope.row)">异常明细</button>
                  <button class="action-btn analysis-btn">板形质量分析</button>
                </template>
              </el-table-column>
              
            </el-table>
          </div>
          <div class="pagination-panel">
             <el-pagination
                v-model:current-page="pagination.currentPage"
                v-model:page-size="pagination.pageSize"
                :page-sizes="[10, 30, 50, 100]"
                layout="total, sizes, prev, pager, next, jumper"
                :total="pagination.total"
                @size-change="handleSizeChange" 
                @current-change="handleCurrentChange"
                background
              />
          </div>
        </div>

        <!-- 分隔条 (条件渲染) -->
        <div v-if="selectedRow" class="splitter" ref="splitterRef" @mousedown="startDrag"></div>

        <!-- 详情区域 (条件渲染) -->
        <div v-if="selectedRow" class="detail-panel" ref="bottomPanelRef">
            <!-- 统计结果表格 -->
            <!-- <div class="detail-section summary-table-section">
              <div class="section-header">统计结果</div>
              <div class="stats-table-container">
                <el-table
                  :data="summaryStatsData"
                  style="width: 100%;"
                  border
                  :header-cell-style="{ background: '#0f2142', color: '#c0c4cc', padding: '6px 8px', textAlign: 'center', fontWeight: 'normal', border: '1px solid #3a5a8a' }"
                  :cell-style="{ background: '#0f2142', color: '#c0c4cc', padding: '6px 8px', textAlign: 'center', border: '1px solid #3a5a8a' }"
                  :row-style="{ background: '#0f2142' }"
                >
                  <el-table-column prop="label" label="" width="100" :cell-style="{ fontWeight: 'bold' }" />
                  <el-table-column prop="class1" label="分级Class1" align="center" />
                  <el-table-column prop="class2" label="分级Class2" align="center" />
                  <el-table-column prop="class3" label="分级Class3" align="center" />
                  <el-table-column prop="class4" label="分级Class4" align="center" />
                  <el-table-column prop="class5" label="分级Class5" align="center" />
                  <el-table-column prop="class6" label="分级Class6" align="center" />
                  <el-table-column prop="class7" label="分级Class7" align="center" />
                </el-table>
              </div>
            </div> -->

            <!-- 图表区域 (修改为 flex row) -->
            <div class="charts-row"> 
              <div class="detail-section chart-section">
                <div class="section-header">分级class的长度</div>
                <div class="chart-container">
                  <div ref="barChartRef" class="chart-placeholder"></div>
                </div>
              </div>
              <div class="detail-section chart-section">
                <div class="section-header">板形基准IU均值曲线</div>
                <div class="chart-container">
                   <div class="legend" style="text-align: right; margin-bottom: 5px;">
                    <span class="legend-item"><span class="color-box head-max" style="background-color: #5470c6;"></span>IU均值</span>
                    <span class="legend-item"><span class="color-box tail-max" style="background-color: #91cc75;"></span>IU正值</span>
                  </div>
                  <div ref="lineChartRef" class="chart-placeholder"></div>
                </div>
              </div>
              <div class="detail-section chart-section">
                <div class="section-header">单卷分档class的占比</div>
                <div class="chart-container">
                  <div ref="pieChartRef" class="chart-placeholder"></div>
                </div>
              </div>
            </div>
        </div>
      </div>

      <!-- 右侧：列选择器 -->
      <div class="column-selector">
         <el-checkbox 
           v-model="checkAll" 
           :indeterminate="isIndeterminate" 
           @change="handleCheckAllChange"
         >
           全选
         </el-checkbox>
         <el-checkbox-group v-model="visibleColumns" @change="handleCheckedColumnsChange">
           <el-checkbox v-for="col in allColumns" :key="col.prop" :label="col.prop" :value="col.prop">
             {{ col.label }}
           </el-checkbox>
         </el-checkbox-group>
      </div>
    </div>


    
    <!--弹窗 -->
    <el-dialog
      v-model="dialogVisible"
      :title="dialogTitle_id"
      class="layout-dialog"
      top="5vh"
      width="80%">
      <div id="data-view">
        <div class="layout-search">
          <div class="layout-search">
            <dv-border-box-11 :title="dialogTitle">
              <el-row style="width: 99%;">
                <el-col :span="24">
                  <div class="grid-content bg-purple">
                    <!-- 速度 -->
                    <dv-border-box-10 style="width:99%;height:200px;">
                      <div
                        id="app11"
                        style="width:99%;height:200px;"/>
                    </dv-border-box-10>

                    <!--板形云图-->
                    <dv-border-box-10 style="width:99%;height:350px;">
                      <div
                        id="app7"
                        style="width:99%;height:350px;"/>
                    </dv-border-box-10>
                    <!-- 第几米板形曲线（放在板形云图下面，横向显示） -->
                    <dv-border-box-10 style="width:99%;height:260px;">
                      <div
                        id="app9"
                        style="width:99%;height:240px;"/>
                    </dv-border-box-10>
                    <!-- 单通道曲线 -->
                    <dv-border-box-10 style="width:99%;height:200px;">
                      <div
                        id="app_chanel"
                        style="width:99%;height:200px;"/>
                    </dv-border-box-10>
                  </div>
                </el-col>
                <el-col :span="8">
                  <div class="grid-content bg-purple-light">
                  <!-- 第几米（位置已移至板形云图下方，这里保留占位，避免布局突变） -->
                  <dv-border-box-10 style="width:99%;height:0px;padding:0;">
                    <div id="app9_old" style="width:0;height:0;display:none;"/>
                  </dv-border-box-10>
                  </div>
                </el-col>
              </el-row>
              <dv-border-box-11 :title="'生产过程追溯'">
                <dv-border-box-10>
                  <!--IU均值  -->
                  <div
                    id="app4"
                    style="width:99%;height:300px;"/>
                </dv-border-box-10>
                <dv-border-box-10>
                  <!--酸轧生产过程追溯  -->
                  <div
                    id="app5"
                    style="width:99%;height:300px;"/>
                </dv-border-box-10>
              </dv-border-box-11>
              <dv-border-box-11 :title="'生产过程追溯'">
                <dv-border-box-10>
                  <!--一次项系数-->
                  <div
                    id="app_first"
                    style="width:99%;height:300px;"/>
                </dv-border-box-10>
                <dv-border-box-10>
                  <!--倾斜  -->
                  <div
                    id="app_tilt"
                    style="width:99%;height:300px;"/>
                </dv-border-box-10>
              </dv-border-box-11>
              <dv-border-box-11 :title="'生产过程追溯'">
                <dv-border-box-10>
                  <!--二次项系数 -->
                  <div
                    id="app_second"
                    style="width:99%;height:300px;"/>
                </dv-border-box-10>
                <dv-border-box-10>
                  <!--弯辊力 -->
                  <div
                    id="app_bend"
                    style="width:99%;height:300px;"/>
                </dv-border-box-10>
              </dv-border-box-11>
              <dv-border-box-11 :title="'生产过程追溯'">
                <dv-border-box-10 style="width:100%">
                  <!--二次项系数 -->
                  <div
                    id="app_shifting_roll"
                    style="width:99%;height:300px;"/>
                </dv-border-box-10>
              </dv-border-box-11>
            </dv-border-box-11>
          </div>
        </div>
      </div>
    </el-dialog>

    <!-- 异常明细弹窗 -->
    <el-dialog
      v-model="abnormalDialogVisible"
      :title="abnormalDialogTitle"
      width="85%"
      top="3vh"
      :close-on-click-modal="false"
      :destroy-on-close="true"
      class="abnormal-dialog"
      :show-close="true"
    >
      <div class="abnormal-dialog-content">

        <!-- 表格区域 -->
        <div class="abnormal-table-panel">
          <el-table
            :data="abnormalTableData"
            style="width: 100%"
            height="400"
            border
            highlight-current-row
            :cell-class-name="abnormalTableCellClassName"
            :header-cell-style="abnormalHeaderStyle"
            :cell-style="abnormalCellStyle"
            :row-style="abnormalRowStyle"
            ref="abnormalTableRef"
            stripe
            :row-class-name="abnormalRowClassName"
          >
            <el-table-column prop="prodLine" label="产线" width="100" align="center" />
            <el-table-column prop="outMatNo" label="出口卷号" width="150" align="center" />
            <el-table-column prop="steelGrade" label="钢种" width="120" align="center" />
            <el-table-column prop="width" label="出口宽度[mm]" width="120" align="center" />
            <el-table-column prop="thickness" label="出口厚度[m]" width="120" align="center" />
            <el-table-column prop="weight" label="出口重量[kg]" width="120" align="center" />
            <el-table-column prop="defectCode" label="主缺陷代码" width="120" align="center">
              <template #default="scope">
                <span :class="getDefectCodeClass(scope.row.defectCode)">{{ scope.row.defectCode }}</span>
              </template>
            </el-table-column>
            <el-table-column prop="defectComment" label="主缺陷描述" min-width="200" align="left" />
            <el-table-column prop="defectClass" label="缺陷代码(头部)" width="140" align="center">
              <template #default="scope">
                <span :class="getDefectClassClass(scope.row.defectClass)">{{ scope.row.defectClass }}</span>
              </template>
            </el-table-column>
          </el-table>
        </div>

        <!-- 分页区域 -->
        <div class="abnormal-pagination-panel">
          <el-pagination
            v-model:current-page="abnormalPagination.currentPage"
            v-model:page-size="abnormalPagination.pageSize"
            :page-sizes="[10, 20, 30, 50]"
            layout="total, sizes, prev, pager, next, jumper"
            :total="abnormalPagination.total"
            @size-change="handleAbnormalSizeChange"
            @current-change="handleAbnormalCurrentChange"
            background
          />
        </div>
      </div>
    </el-dialog>

    

  </div>
</template>

<script setup lang="ts">
import { ref, reactive, computed, watch, onMounted, onUnmounted, nextTick } from 'vue';
import * as echarts from 'echarts/core';
import {
  BarChart,
  LineChart,
  PieChart
} from 'echarts/charts';
import {
  TitleComponent,
  TooltipComponent,
  GridComponent,
  LegendComponent
} from 'echarts/components';
import {
  CanvasRenderer
} from 'echarts/renderers';
import { thicknessAndLayOutJudgeApi } from '/@/api/thicknessAndLayOutJudge/index';
import { historyApi } from '/@/api/furnaceTempDynamicCtrl/history';
import {saveAs} from 'file-saver';
import * as XLSX from 'xlsx';

// Register ECharts components
echarts.use([
  TitleComponent,
  TooltipComponent,
  GridComponent,
  LegendComponent,
  BarChart,
  LineChart,
  PieChart,
  CanvasRenderer
]);

// --- Interfaces --- 
interface SearchParams {
  dateRange: Date[];
  prodThicknessMin: string;
  prodThicknessMax: string;
  prodWidthMin: string;
  prodWidthMax: string;
  materialThicknessMin: string;
  materialThicknessMax: string;
  steelGrade: string;
  exportRollNo: string;
  entryRollNo: string;
}

interface FindDataParams {
  dto:{
    thicknessMin: string,
    thicknessMax: string,
    widthMin: string,
    widthMax: string,
    enThicknessMin: string,
    enThicknessMax: string,
    steelGrade: string,
    extid: string,
    entid: string,
    startDate?: string,
    endDate?: string
  },
  page:{
    pageIndex: string,
    pageSize: string,
  }
  
  
}

interface TableRow {
  id: number;
  exportRollNo: string;
  entryRollNo: string;
  prodLine: string;
  steelGrade: string;
  prodThickness: number;
  prodWidth: number;
  prodLength: number;
  driveSideWave: number;
  cutFlag:number;
  opSideWave: number;
  buckleHead: number;
  buckleBody: number;
  ascLength:string;
  class1?: number;
  class2?: number;
  class3?: number;
  class4?: number;
  class5?: number;
  class6?: number;
  class7?: number;
  classRate1?: number;
  classRate2?: number;
  classRate3?: number;
  classRate4?: number;
  classRate5?: number;
  classRate6?: number;
  classRate7?: number;
}

// --- Table Data ---
interface RecordTableRow {
  extid: string;
  entid:string;
  steelGrade: string;
  pltcmNo:string;
  width:string;
  length:string;
  thickness:string;
  ascWaveLengthDs:string;
  ascWaveLengthOs:string;
  flataveAlarmLengthHead:string;
  flataveAlarmLengthMiddle:string;
  cutFlag:number;


}

interface SummaryStats {
  label: string;
  class1: number;
  class2: number;
  class3: number;
  class4: number;
  class5: number;
  class6: number;
  class7: number;
}

// --- Reactive State --- 
const searchParams = reactive<SearchParams>({
  dateRange: [],
  prodThicknessMin: '',
  prodThicknessMax: '',
  prodWidthMin: '',
  prodWidthMax: '',
  materialThicknessMin: '',
  materialThicknessMax: '',
  steelGrade: '',
  exportRollNo: '',
  entryRollNo: '',
});

// --- Mock Table Data --- 
const allTableData = ref<TableRow[]>([]);

// --- Pagination --- 
const pagination = reactive({
  currentPage: 1,
  pageSize: 10,
  total: allTableData.value.length
});

const pagedTableData = computed(() => {
  const start = (pagination.currentPage - 1) * pagination.pageSize;
  const end = start + pagination.pageSize;
  return allTableData.value.slice(start, end);
});


const handleSizeChange = (val: number) => {
  pagination.pageSize = val;
  fetchTableData();

};

const handleCurrentChange = (val: number) => {
  pagination.currentPage = val;
  fetchTableData();
};

// --- Row Selection --- 
const selectedRow = ref<TableRow | null>(null);

const selectRow = (row: TableRow) => {
  selectedRow.value = row;
  console.log('选中行:', row);
};

const tableRowClassName = ({ row }: { row: TableRow }) => {
  if (selectedRow.value && row.id === selectedRow.value.id) {
    return 'selected-row'; 
  }
  return '';
};

// --- Mock Detail Data --- 
const summaryStatsData = computed<SummaryStats[]>(() => {
  if (!selectedRow.value) return [];
  // Generate mock data based on selected row id for variety
  console.log(selectedRow.value)
  return [
    {
      label: '长度(m)',
      class1: selectedRow.value.class1,
      class2: selectedRow.value.class2,
      class3: selectedRow.value.class3,
      class4: selectedRow.value.class4,
      class5: selectedRow.value.class5,
      class6: selectedRow.value.class6,
      class7: selectedRow.value.class7,
      classRate1: selectedRow.value.classRate1,
      classRate2: selectedRow.value.classRate2,
      classRate3: selectedRow.value.classRate3,
      classRate4: selectedRow.value.classRate4,
      classRate5: selectedRow.value.classRate5,
      classRate6: selectedRow.value.classRate6,
      classRate7: selectedRow.value.classRate7,
    }
  ];
});

// --- ECharts Refs and Instances ---
const barChartRef = ref<HTMLElement | null>(null);
const lineChartRef = ref<HTMLElement | null>(null);
const pieChartRef = ref<HTMLElement | null>(null);

let barChartInstance: echarts.ECharts | null = null;
let lineChartInstance: echarts.ECharts | null = null;
let pieChartInstance: echarts.ECharts | null = null;

// --- Mock Chart Data Generators ---
const generateBarData = (params: any) => {
  console.log(params)
  return summaryStatsData.value[0] 
    ? Object.entries(summaryStatsData.value[0])
        .filter(([key]) => key.startsWith('class'))
        .map(([key, value]) => value) // Add variation
    : [];
};
let iuMean=ref([])
let iuPositive=ref([])
async function generateLineData(seed: any){

  let params = [
    "flatave",
    "flatave_positive"
  ]

  const graphParam = {
    line: 'TCM2280',
    extid: [seed.extid],
    model: params,
  };
  
  const response = await historyApi.getgraphData(graphParam);
  iuMean.value = response.data.data.model[0]["flatave"]
  iuPositive.value = response.data.data.model[0]["flatave_positive"]
  

  console.log("iumean"+response)
};

const generatePieData = (params: number) => {
  const baseData = summaryStatsData.value[0] 
    ? Object.entries(summaryStatsData.value[0])
        .filter(([key]) => key.startsWith('classRate'))
        .map(([key, value], index) => ({ 
            name: `Class ${index + 1}`, 
            value: value
          }))
    : [];
  console.log(baseData)
  // Ensure total is not zero for percentage calculation later if needed
  return baseData.filter(item => item.value > 0);
};

// --- ECharts Options ---
const barChartOption = computed(() => {
  if (!selectedRow.value) return {};
  const data = generateBarData(selectedRow.value);
  return {
    tooltip: { trigger: 'axis', axisPointer: { type: 'shadow' } },
    grid: { left: '3%', right: '4%', bottom: '3%', containLabel: true },
    xAxis: [{ type: 'category', data: ['C1', 'C2', 'C3', 'C4', 'C5', 'C6', 'C7'], axisTick: { alignWithLabel: true }, axisLabel: { color: '#c0c4cc' } }],
    yAxis: [{ type: 'value', axisLabel: { color: '#c0c4cc' }, splitLine: { lineStyle: { color: '#3a5a8a' } } }],
    series: [{
      name: '长度(m)',
      type: 'bar',
      barWidth: '60%',
      data: data,
      itemStyle: { color: '#2979ff' }
    }]
  };
});

const lineChartOption = computed(() => {
  if (!selectedRow.value) return {};
  //generateLineData(selectedRow.value);
  console.log(iuMean.value)
  return {
    tooltip: { 
      trigger: 'axis',
      formatter: function(params: any) {
        let result = params[0].axisValue + '<br/>';
        params.forEach((param: any) => {
          result += param.marker + param.seriesName + ': ' + param.value.toFixed(3) + '<br/>';
        });
        return result;
      }
    },
    legend: { show: false }, // Using custom legend
    grid: { left: '3%', right: '4%', bottom: '3%', containLabel: true },
    xAxis: { type: 'category', boundaryGap: false, axisLabel: { color: '#c0c4cc' } },
    yAxis: { 
      type: 'value', 
      axisLabel: { 
        color: '#c0c4cc',
        formatter: '{value}'
      }, 
      splitLine: { lineStyle: { color: '#3a5a8a' } } 
    },
    series: [
      { name: 'IU均值', type: 'line', smooth: true, data: iuMean.value, itemStyle: { color: '#5470c6' } },
      { name: 'IU正值', type: 'line', smooth: true, data: iuPositive.value, itemStyle: { color: '#91cc75' } }
    ]
  };
});

const pieChartOption = computed(() => {
  if (!selectedRow.value) return {};
  const data = generatePieData(selectedRow.value);
  return {
    tooltip: { trigger: 'item', formatter: '{b} : {c} ({d}%)' },
    legend: { 
      orient: 'vertical', 
      left: 'left', 
      textStyle: { color: '#c0c4cc' } 
    },
    series: [{
      name: 'Class占比',
      type: 'pie',
      radius: '70%',
      center: ['60%', '50%'], // Adjust center to avoid legend overlap
      data: data,
      emphasis: {
        itemStyle: { shadowBlur: 10, shadowOffsetX: 0, shadowColor: 'rgba(0, 0, 0, 0.5)' }
      },
      label: { color: '#c0c4cc' },
      labelLine: { lineStyle: { color: '#c0c4cc' } }
    }]
  };
});

// --- Chart Initialization and Updates ---
const initCharts = () => {
  try {
    if (barChartRef.value && !barChartInstance) {
      barChartInstance = echarts.init(barChartRef.value);
      barChartInstance.setOption(barChartOption.value);
    }
    if (lineChartRef.value && !lineChartInstance) {
      lineChartInstance = echarts.init(lineChartRef.value);
      lineChartInstance.setOption(lineChartOption.value);
    }
    if (pieChartRef.value && !pieChartInstance) {
      pieChartInstance = echarts.init(pieChartRef.value);
      pieChartInstance.setOption(pieChartOption.value);
    }
  } catch (error) {
    console.error("ECharts initialization failed:", error);
  }
};

const updateCharts = () => {
  if (!selectedRow.value) return;
  try {
    barChartInstance?.setOption(barChartOption.value);
    lineChartInstance?.setOption(lineChartOption.value);
    pieChartInstance?.setOption(pieChartOption.value);
  } catch (error) {
    console.error("ECharts update failed:", error);
  }
};

// Watch for selected row changes to update charts
watch(selectedRow, async (newVal) => {
  if (newVal) {
    await generateLineData(newVal); // 等待数据加载
    nextTick(() => {
      initCharts();
      updateCharts();
    });
  }
});

// --- Resize Handling ---
const resizeCharts = () => {
  barChartInstance?.resize();
  lineChartInstance?.resize();
  pieChartInstance?.resize();

};

onBeforeMount(()=> {
  fetchTableData();
});

onMounted(() => {
  window.addEventListener('resize', resizeCharts);
  
  
});

const fetchTableData = async () => {
  try {
    const formatDate = (date: string | Date | null | undefined): string | undefined => {
      if (!date) return undefined;
      if (date instanceof Date) {
        const pad = (num: number) => num.toString().padStart(2, '0');
        return `${date.getFullYear()}-${pad(date.getMonth() + 1)}-${pad(date.getDate())} ${pad(date.getHours())}:${pad(date.getMinutes())}:${pad(date.getSeconds())}`;
      }
      return date;
    };

    if(searchParams.dateRange==null){
      searchParams.dateRange=[];
    }

    const params: FindDataParams = {
      dto:{
        thicknessMin: searchParams.prodThicknessMin,
        thicknessMax: searchParams.prodThicknessMax,
        widthMin: searchParams.prodWidthMin,
        widthMax: searchParams.prodWidthMax,
        enThicknessMin: searchParams.materialThicknessMin,
        enThicknessMax: searchParams.materialThicknessMax,
        steelGrade: searchParams.steelGrade,
        extid: searchParams.exportRollNo,
        entid: searchParams.entryRollNo,
        startDate: formatDate(searchParams.dateRange[0]),
        endDate: formatDate(searchParams.dateRange[1])
      },
      page:{
        pageIndex: String(pagination.currentPage),
        pageSize: String(pagination.pageSize),
        
      }
      
    };

    Object.keys(params).forEach(key => {
      if (params[key as keyof FindDataParams] === undefined) {
        delete params[key as keyof FindDataParams];
      }
    });

    const response = await thicknessAndLayOutJudgeApi.findPltcmByPage(params);

    console.log(response)

    if (response && response.data && Array.isArray(response.data.data.records)) {
      const responsePayload = response.data.data;
      const records = responsePayload.records;
      console.log(records)

      const mappedData = records.map((record: RecordTableRow) => {
        return {
          exportRollNo: record.extid,
          entryRollNo: record.entid,
          prodLine: record.pltcmNo,
          steelGrade: record.steelGrade,
          prodThickness: record.thickness,
          prodWidth: record.width,
          prodLength: record.length,
          buckleHead: record.flataveAlarmLengthHead,
          buckleBody: record.flataveAlarmLengthMiddle,
          driveSideWave: record.ascWaveLengthDs,
          opSideWave: record.ascWaveLengthOs,
          ...record
        };
      });
      
      allTableData.value = mappedData;
      if (mappedData.length > 0) {
        selectedRow.value = mappedData[0];
      }
      pagination.total = responsePayload.total;
      ElMessage.success(responsePayload.msg || '查询成功');
    } else {
      ElMessage.info(response?.data?.msg || '未查询到数据或响应格式不正确');
      allTableData.value = [];
      pagination.total = 0;
    }

  } catch (error) {
    console.error('获取数据失败:', error);
    ElMessage.error(error.response?.data?.msg || error.message || '获取数据失败');
    allTableData.value = [];
    pagination.total = 0;
  }
}

onUnmounted(() => {
  window.removeEventListener('resize', resizeCharts);
  barChartInstance?.dispose();
  lineChartInstance?.dispose();
  pieChartInstance?.dispose();
});

// --- Handlers --- 
const handleSearch = () => {
  console.log('查询参数:', searchParams);
  // Add actual search logic here, potentially filtering allTableData
  // For now, just log
  pagination.currentPage = 1;
  fetchTableData();
};

const handleReset = () => {
  Object.keys(searchParams).forEach(key => {
    const typedKey = key as keyof SearchParams;
    if (typedKey === 'dateRange') {
      searchParams[typedKey] = [];
    } else {
      searchParams[typedKey] = '';
    }
  });
  selectedRow.value = null; // Clear selection on reset
  console.log('重置参数');
};

// --- Column Visibility --- 
interface ColumnOption {
  prop: keyof TableRow | 'buckle'; // 'buckle' for the group
  label: string;
}

// Define all possible columns (excluding index and actions)
const allColumns = ref<ColumnOption[]>([
  { prop: 'ascLength', label: '板形数据长度[m]' },
  { prop: 'class1', label: '分级class1的长度[m]' },
  { prop: 'class2', label: '分级class2的长度[m]' },
  { prop: 'class3', label: '分级class3的长度[m]' },
  { prop: 'class4', label: '分级class4的长度[m]' },
  { prop: 'class5', label: '分级class5的长度[m]' },
  { prop: 'class6', label: '分级class6的长度[m]' },
  { prop: 'class7', label: '分级class7的长度[m]' },
  { prop: 'classRate1', label: '分级class1的占比[%]' },
  { prop: 'classRate2', label: '分级class2的占比[%]' },
  { prop: 'classRate3', label: '分级class3的占比[%]' },
  { prop: 'classRate4', label: '分级class4的占比[%]' },
  { prop: 'classRate5', label: '分级class5的占比[%]' },
  { prop: 'classRate6', label: '分级class6的占比[%]' },
  { prop: 'classRate7', label: '分级class7的占比[%]' },
  // Representing the group - visibility controlled by children
  // { prop: 'buckle', label: '翘楚长度[m]' }, 
  // { prop: 'buckleHead', label: '翘楚长度-头部[m]' },
  // { prop: 'buckleBody', label: '翘楚长度-本体[m]' },
]);

// Default visible columns (adjust as needed)
const defaultVisible = allColumns.value.map(col => col.prop);
const visibleColumns = ref<Array<keyof TableRow | 'buckle'>>([]);

const checkAll = ref(false);
const isIndeterminate = ref(false);

const isColumnVisible = (prop: keyof TableRow | 'buckle') => {
  // Special handling for the group column header
  if (prop === 'buckle') {
    return visibleColumns.value.includes('buckleHead') || visibleColumns.value.includes('buckleBody');
  }
  return visibleColumns.value.includes(prop);
};

const handleCheckAllChange = (val: boolean) => {
  visibleColumns.value = val ? allColumns.value.map(c => c.prop) : [];
  isIndeterminate.value = false;
};

const handleCheckedColumnsChange = (value: Array<keyof TableRow | 'buckle'>) => {
  const checkedCount = value.length;
  checkAll.value = checkedCount === allColumns.value.length;
  isIndeterminate.value = checkedCount > 0 && checkedCount < allColumns.value.length;
};

// --- Refs for DOM elements (including splitter logic refs) ---
const topPanelRef = ref<HTMLDivElement | null>(null);
const splitterRef = ref<HTMLDivElement | null>(null);
const bottomPanelRef = ref<HTMLDivElement | null>(null); // Keep for potential future use

// --- State for dragging ---
const isDragging = ref(false);
const startY = ref(0);
const initialTopHeight = ref(0);

async function findBendCurve(extid:any) {
  let params = [
    "tcm_s5_wr_bf_act",
    "tcm_s5_mr_bf_act"
  ]

  const graphParam = {
    line: 'TCM2280',
    extid: [extid],
    curve: params,
  };
  const res = await historyApi.getgraphData(graphParam);
  console.log("res"+res)
      
  //S5机架弯辊力
  if (
    Array.isArray(res.data.data.curve[0]["tcm_s5_wr_bf_act"]) &&
    res.data.data.curve[0]["tcm_s5_mr_bf_act"].length > 0
  ) {
    echart_bend(res.data.data.curve[0])
  }
};

async function findShiftingCurve(extid:any){
  let params = [
    "tcm_s1_shift_act",
    "tcm_s2_shift_act",
    "tcm_s3_shift_act",
    "tcm_s4_shift_act",
    "tcm_s5_shift_act",
  ]

  const graphParam = {
    line: 'TCM2280',
    extid: [extid],
    curve: params,
  };
  const res = await historyApi.getgraphData(graphParam);
  console.log("res"+res)
      
  //S5机架弯辊力
  if (
    Array.isArray(res.data.data.curve[0]["tcm_s5_shift_act"]) &&
    res.data.data.curve[0]["tcm_s5_shift_act"].length > 0
  ) {
    echart_shifting(res.data.data.curve[0])
  }
}

// 弯辊力曲线
function  echart_shifting(obj:any) {
      var arrlength = [] //X轴的数组
      for (let i = 1; i <= obj["tcm_s5_shift_act"].length; i++) {
        arrlength.push(i)
      }
      // this.yAxis.min = this.echart.min20
      // this.yAxis.max = this.echart.max20
      toolbox.feature.myTool = {
        show: true, //是否显示
        title: '定义y轴', //鼠标悬空的提示文字
        icon:
          'path://M659.77002 969.890638 363.679441 969.890638 363.679441 644.667555 33.604864 76.752058l325.225129 0 155.319461 300.952306L669.480172 76.752058 989.844597 76.752058 659.77002 639.812991 659.77002 969.890638z', //这个是阿里icon svg 后 b的全部字符串
        onclick: o => {
          sum = 20
          dialogVisible2.value = true
          dialogTitle2.value = '定义Y轴刻度范围'
        }
      }
      var myChart = echarts.init(document.getElementById('app_shifting_roll'))
      // 指定图表的配置项和数据
      var option4 = {
        title: {
          text: '',
          textStyle: {
            fontSize: 16,
            fontWeight: 700,
            color: '#ffffff'
          }
        },
        tooltip: {
          trigger: 'axis'
        },
        grid: {
          left: '3%',
          right: '6%',
          bottom: '8%',
          containLabel: true
        },
        legend: {
          x: 'center', //可设定图例在左、右、居
          top: 20,
          data: [
            '1机架窜辊实际',
            '2机架窜辊实际',
            '3机架窜辊实际',
            '4机架窜辊实际',
            '5机架窜辊实际'
          ],
          textStyle: {
            // fontWeight: 'bolder', 字体加粗
            fontSize: 12,
            color: '#ffffff'
          },
          icon: 'roundRect' //图例的形状
        }, // 显示表头
        toolbox: toolbox,
        //color: this.echarts_data.color,
        dataZoom: [
          {
            //X轴滑动条                    {
            type: 'slider', //滑动条
            show: true, //开启
            xAxisIndex: [0],
            start: 0, //初始化时，滑动条宽度开始标度
            end: 100 //初始化时，滑动条宽度结束标度
          }, //X轴内置滑动
          {
            type: 'inside', //内置滑动，随鼠标滚轮展示
            xAxisIndex: [0],
            start: 0, //初始化时，滑动条宽度开始标度
            end: 100 //初始化时，滑动条宽度结束标度
          }
        ],
        xAxis: {
          name: '(m)',
          type: 'category',
          boundaryGap: false,
          axisLabel: {
            show: true,
            textStyle: {
              color: '#fff'
            }
          },
          axisLine: {
            lineStyle: {
              color: '#fff' //改变坐标轴的颜色
            }
          },
          splitLine: {
            show: true,
            lineStyle: {
              type: 'dotted'
            }
          },
          data: arrlength
        },
        yAxis: {
          name: '10KN',
          type: 'value',
          scale: true, //纵坐标自适应
          min: echart.min20,
          max: echart.max20,
          splitLine: {
            show: true,
            lineStyle: {
              type: 'dotted'
            }
          },
          axisLabel: {
            formatter: '{value}',
            textStyle: {
              color: '#fff'
            }
          },
          axisLine: {
            lineStyle: {
              color: '#fff' //改变坐标轴的颜色
            }
          }
        },
        series: [
          {
            name: '1机架窜辊实际',
            type: 'line',
            smooth: true,
            data: obj["tcm_s1_shift_act"]
          },
          {
            name: '2机架窜辊实际',
            type: 'line',
            smooth: true,
            data: obj["tcm_s2_shift_act"]
          },
          {
            name: '3机架窜辊实际',
            type: 'line',
            smooth: true,
            data: obj["tcm_s3_shift_act"]
          },
          {
            name: '4机架窜辊实际',
            type: 'line',
            smooth: true,
            data: obj["tcm_s4_shift_act"]
          },
          {
            name: '5机架窜辊实际',
            type: 'line',
            smooth: true,
            data: obj["tcm_s5_shift_act"]
          }
        ]
      }
      // 使用刚指定的配置项和数据显示图表。
      myChart.setOption(option4)
    };

// 弯辊力曲线
function  echart_bend(obj:any) {
      var arrlength = [] //X轴的数组
      for (let i = 1; i <= obj["tcm_s5_wr_bf_act"].length; i++) {
        arrlength.push(i)
      }
      // this.yAxis.min = this.echart.min20
      // this.yAxis.max = this.echart.max20
      toolbox.feature.myTool = {
        show: true, //是否显示
        title: '定义y轴', //鼠标悬空的提示文字
        icon:
          'path://M659.77002 969.890638 363.679441 969.890638 363.679441 644.667555 33.604864 76.752058l325.225129 0 155.319461 300.952306L669.480172 76.752058 989.844597 76.752058 659.77002 639.812991 659.77002 969.890638z', //这个是阿里icon svg 后 b的全部字符串
        onclick: o => {
          sum = 20
          dialogVisible2.value = true
          dialogTitle2.value = '定义Y轴刻度范围'
        }
      }
      var myChart = echarts.init(document.getElementById('app_bend'))
      // 指定图表的配置项和数据
      var option4 = {
        title: {
          text: 'S5机架弯辊力',
          textStyle: {
            fontSize: 16,
            fontWeight: 700,
            color: '#ffffff'
          }
        },
        tooltip: {
          trigger: 'axis'
        },
        grid: {
          left: '3%',
          right: '6%',
          bottom: '8%',
          containLabel: true
        },
        legend: {
          x: 'center', //可设定图例在左、右、居
          top: 20,
          data: [
            '工作辊实际值DS',
            '工作辊实际值OS',
            '中间辊实际值DS',
            '中间辊实际值OS'
          ],
          textStyle: {
            // fontWeight: 'bolder', 字体加粗
            fontSize: 12,
            color: '#ffffff'
          },
          icon: 'roundRect' //图例的形状
        }, // 显示表头
        toolbox: toolbox,
        //color: this.echarts_data.color,
        dataZoom: [
          {
            //X轴滑动条                    {
            type: 'slider', //滑动条
            show: true, //开启
            xAxisIndex: [0],
            start: 0, //初始化时，滑动条宽度开始标度
            end: 100 //初始化时，滑动条宽度结束标度
          }, //X轴内置滑动
          {
            type: 'inside', //内置滑动，随鼠标滚轮展示
            xAxisIndex: [0],
            start: 0, //初始化时，滑动条宽度开始标度
            end: 100 //初始化时，滑动条宽度结束标度
          }
        ],
        xAxis: {
          name: '(m)',
          type: 'category',
          boundaryGap: false,
          axisLabel: {
            show: true,
            textStyle: {
              color: '#fff'
            }
          },
          axisLine: {
            lineStyle: {
              color: '#fff' //改变坐标轴的颜色
            }
          },
          splitLine: {
            show: true,
            lineStyle: {
              type: 'dotted'
            }
          },
          data: arrlength
        },
        yAxis: {
          name: '10KN',
          type: 'value',
          scale: true, //纵坐标自适应
          min: echart.min20,
          max: echart.max20,
          splitLine: {
            show: true,
            lineStyle: {
              type: 'dotted'
            }
          },
          axisLabel: {
            formatter: '{value}',
            textStyle: {
              color: '#fff'
            }
          },
          axisLine: {
            lineStyle: {
              color: '#fff' //改变坐标轴的颜色
            }
          }
        },
        series: [
          {
            name: '工作辊实际值',
            type: 'line',
            smooth: true,
            data: obj["tcm_s5_wr_bf_act"]
          },
          {
            name: '中间辊实际值',
            type: 'line',
            smooth: true,
            data: obj["tcm_s5_mr_bf_act"]
          }
        ]
      }
      // 使用刚指定的配置项和数据显示图表。
      myChart.setOption(option4)
    };

// --- Dragging Logic (Copied from ThicknessJudge) ---
const startDrag = (event: MouseEvent) => {
  if (!topPanelRef.value) return;
  isDragging.value = true;
  startY.value = event.clientY;
  initialTopHeight.value = topPanelRef.value.offsetHeight;
  document.body.style.userSelect = 'none'; 
  document.body.style.cursor = 'row-resize'; 

  window.addEventListener('mousemove', doDrag);
  window.addEventListener('mouseup', stopDrag);
};

const doDrag = (event: MouseEvent) => {
  if (!isDragging.value || !topPanelRef.value) return;

  const deltaY = event.clientY - startY.value;
  let newHeight = initialTopHeight.value + deltaY;

  const minHeight = 150; 
  const containerHeight = (topPanelRef.value.parentElement as HTMLElement)?.offsetHeight || window.innerHeight; // Parent is now table-content-wrapper
  const splitterHeight = splitterRef.value?.offsetHeight || 8;
  const bottomMinHeight = 150; 
  const maxHeight = containerHeight - splitterHeight - bottomMinHeight;

  if (newHeight < minHeight) newHeight = minHeight;
  if (newHeight > maxHeight) newHeight = maxHeight;
  
  topPanelRef.value.style.height = `${newHeight}px`;
};

const stopDrag = () => {
  if (!isDragging.value) return;
  isDragging.value = false;
  document.body.style.userSelect = ''; 
  document.body.style.cursor = ''; 

  window.removeEventListener('mousemove', doDrag);
  window.removeEventListener('mouseup', stopDrag);
};


// 弹窗相关
const dialogVisible = ref(false);
const dialogVisible2=ref(false);
const abnormalDialogVisible = ref(false);
const dialogTitle_id=ref('');
const dialogTitle=ref('');
const dialogTitle2=ref(''); //修改Y轴
const abnormalDialogTitle=ref('');
const abnormalDialogTab=ref<'thickness' | 'shape'>('thickness');
let sum=<any>1;
const currentRow=ref();

// 异常明细弹窗相关数据
const abnormalSearchParams = reactive({
  exportRollNo: '',
  mainDefectDesc: '',
  thickness: ''
});

const abnormalTableData = ref<any[]>([]);
const abnormalTableRef = ref();

const abnormalPagination = reactive({
  currentPage: 1,
  pageSize: 10,
  total: 0
});
const plateCurveData=ref([]);
let rememberA=<any>[];
let rememberB=<any>[];
let rememberC=<any>[];
let rememberR=<any>[];
let clickChanel=13;
let formData='';
const echart={
  max1: 30,
  min1: -10,
  max2: 30,
  min2: -30,
  // max3: 30,
  // min3: -30,
  max5: 30,
  min5: -30,
  max18: 25,
  min18: -25
};
const xAxis={
  type: 'category',
  boundaryGap: false,
  axisLabel: {
    color: '#fff'
  },
  splitLine: {
    show: true,
    lineStyle: {
      type: 'dotted'
    }
  },
  axisLine: {
    lineStyle: {
      color: '#fff'
    }
  },
  name: '(m)',
  data:<any> []
};
const yAxis={
  type: 'value',
  axisLabel: {
    color: '#fff'
  },
  min: 0,
  max: 1,
  scale: true, //纵坐标自适应
  splitLine: {
    show: true,
    lineStyle: {
      type: 'dotted'
    }
  },
  axisLine: {
    lineStyle: {
      color: '#fff'
    }
  }
}
// 图表数据
const title={
  text: '',
  textStyle: {
    color: '#fff'
  }
};
// const echarts_data=definitionEchart.data.echarts_data.sameOp;
const tooltip={
  trigger: 'axis'
};
const legend={
  textStyle: {
    fontSize: 20,
    color: '#fff'
  }
};
let toolbox={
  iconStyle: {
    borderColor: '#fff'
  },
  feature: {
    dataView: {
      show: true,
      lang: ['数据视图', '关闭', '导出Excel'],
      //optionToContent为重画表格的函数
      optionToContent: function(opt:any) {
        //axisData是你想定义的表格第一列的数据，我这里设置为柱形图的x轴数据
        var axisData = opt.xAxis[0].data
        //tAxis[0]为你想定义的表格第一行的数据
        var txisData = opt.series[0].data
        // console.log(opt)
        var series = opt.series
        //表头
        var tdHeads = '<td  style="padding: 0 10px"></td>'
        var tdBodys = ''
        var nameData = txisData
        // console.log(nameData)
        for (var i = 0; i < nameData.length; i++) {
          tdHeads +=
            '<td style="padding: 0 10px">' + nameData[i] + '</ td >'
        }
        var table =
          '<table id="Mytable" border="1" class="table table-bordered table-striped table-hover" style="width:100%;text-align:center;color: #000;" ><tbody><tr>' +
          tdHeads +
          ' </tr>'
        for (var i = 0, l = axisData.length; i < l; i++) {
          for (var j = 0; j < series.length; j++) {
            if (series[j].data != undefined) {
              var temp = series[j].data[i]
              if (temp != null && temp != undefined) {
                tdBodys += '<td>' + temp + '</td>'
              } else {
                tdBodys += '<td></td>'
              }
            }
          }
          table +=
            '<tr><td style="padding: 0 10px">' +
            axisData[i] +
            '</td>' +
            tdBodys +
            '</tr>'
          tdBodys = ''
        }
        table += '</tbody></table>'
        return table
      },
      contentToOption: function(HTMLDomElement, opt) {
        let et = XLSX.utils.table_to_book(
          document.getElementById('Mytable')
        )
        let etout = XLSX.write(et, {
          bookType: 'xlsx',
          bookSST: true,
          type: 'array'
        })
        try {
          saveAs(
            new Blob([etout], {
              type: 'application/octet-stream'
            }),
            'echarts数据' + '-' + new Date().toLocaleString() + '.xlsx'
          )
        } catch (e) {}
        return etout
      }
    },
    magicType: { show: true },
    restore: { show: true },
    saveAsImage: { show: true }
    // dataZoom: {show: true},
  }
};
function openDialog(row:any) {
  dialogVisible.value = true;
  dialogTitle_id.value= '酸轧出口卷号:' + row.exportRollNo;
  dialogTitle.value = '板形质量分析';
  currentRow.value = row;
  formData=row.exportRollNo;
  findAll2(row.exportRollNo);
  findAll4(row.exportRollNo,row);
  findAll4_1(row.exportRollNo);
  findBendCurve(row.exportRollNo);
  findShiftingCurve(row.exportRollNo);
}

function openAbnormalDialog(row:any) {
  abnormalDialogVisible.value = true;
  abnormalDialogTitle.value = '异常明细 - 酸轧出口卷号:' + row.exportRollNo;
  abnormalDialogTab.value = 'thickness';
  currentRow.value = row;
  
  // 初始化搜索参数
  abnormalSearchParams.exportRollNo = row.exportRollNo || '';
  abnormalSearchParams.mainDefectDesc = '';
  abnormalSearchParams.thickness = '';
  
  // 重置分页
  abnormalPagination.currentPage = 1;
  abnormalPagination.pageSize = 10;
  
  // 获取异常明细数据
  fetchAbnormalTableData();
}

// 获取异常明细表格数据
const fetchAbnormalTableData = async () => {
  try {
    const param = {
      pageIndex: abnormalPagination.currentPage,
      pageSize: abnormalPagination.pageSize,
      outMatNo: abnormalSearchParams.exportRollNo,
      thickness: abnormalSearchParams.thickness,
      defectComment: abnormalSearchParams.mainDefectDesc,
    };
    
    const res = await thicknessAndLayOutJudgeApi.findThkJudge(param);
    if (res && res.data) {
      const responsePayload = res.data.data;
      const mappedData = responsePayload.map((record: any) => ({
        outMatNo: record.outMatNo,
        prodLine: record.pltcmNo,
        steelGrade: record.steelGrade,
        thickness: record.thickness,
        width: record.width,
        weight: record.weight,
        defectCode: record.defectCode,
        defectComment: record.defectComment,
        defectClass: record.defectClass,
        ...record
      }));
      
      abnormalTableData.value = mappedData;
      abnormalPagination.total = res.data.count;
    } else {
      abnormalTableData.value = [];
      abnormalPagination.total = 0;
    }
  } catch (error) {
    console.error('获取异常明细数据失败:', error);
    abnormalTableData.value = [];
    abnormalPagination.total = 0;
  }
};

// 异常明细搜索
const handleAbnormalSearch = () => {
  abnormalPagination.currentPage = 1;
  fetchAbnormalTableData();
};

// 异常明细重置
const handleAbnormalReset = () => {
  abnormalSearchParams.exportRollNo = currentRow.value?.exportRollNo || '';
  abnormalSearchParams.mainDefectDesc = '';
  abnormalSearchParams.thickness = '';
  abnormalPagination.currentPage = 1;
  fetchAbnormalTableData();
};

// 异常明细分页处理
const handleAbnormalSizeChange = (val: number) => {
  abnormalPagination.pageSize = val;
  fetchAbnormalTableData();
};

const handleAbnormalCurrentChange = (val: number) => {
  abnormalPagination.currentPage = val;
  fetchAbnormalTableData();
};

// 异常明细表格样式相关
const abnormalIndexMethod = (index: number) => {
  return (abnormalPagination.currentPage - 1) * abnormalPagination.pageSize + index + 1;
};

const abnormalHeaderStyle = {
  background: '#2a5caa',
  color: '#fff',
  padding: '12px 10px',
  textAlign: 'center',
  fontWeight: 'bold',
  border: 'none',
  fontSize: '14px'
};

const abnormalCellStyle = {
  padding: '10px 10px',
  textAlign: 'center',
  color: '#c0c4cc',
  border: 'none',
  fontSize: '13px'
};

const abnormalRowStyle = {
  background: '#0f2142'
};

const abnormalRowClassName = ({ rowIndex }: { rowIndex: number }) => {
  return rowIndex % 2 === 1 ? 'abnormal-stripe-row' : '';
};

const abnormalTableCellClassName = ({ row, column }: { row: any; column: any }) => {
  if (column.property === 'defectCode' && typeof row.defectCode === 'number' && row.defectCode >= 10) {
    return 'abnormal-red-text';
  }
  if (column.property === 'defectClass' && typeof row.defectClass === 'number' && row.defectClass >= 10) {
    return 'abnormal-red-text';
  }
  return '';
};

const getDefectCodeClass = (defectCode: any) => {
  if (typeof defectCode === 'number' && defectCode >= 10) {
    return 'defect-code-high';
  }
  return 'defect-code-normal';
};

const getDefectClassClass = (defectClass: any) => {
  if (typeof defectClass === 'number' && defectClass >= 10) {
    return 'defect-class-high';
  }
  return 'defect-class-normal';
};

async function findAll4_1(extid:any){
  let search_group = ''
  if (currentRow.value.length > 6000) {
    search_group = 'array'
  } else {
    search_group = 'curve'
  }
  let params = [
    "tcm_s5_force_diff",
    "tcm_s4s5_ten_diff",
    "tcm_s5_tilt_act"
  ]

  const graphParam = {
    line: 'TCM2280',
    extid: [extid],
    curve: params,
  };
  const res = await historyApi.getgraphData(graphParam);
  echart_test5(res.data.data.curve)
  echart_tilt(res.data.data.curve)

}
//酸轧生产过程追溯
function echart_test5(datas3:any) {
  var need_x11 = []
  var name1 = '5机架轧制力差'
  var name2 = '5机架张力差'
  var name3 = '5机架倾斜值'
  // var name3 = '5机架出口速度'

  //5机架出口速度

  var need_y11 = []
  var need_y22 = []
  var need_y33 = []
  if (
    Array.isArray(datas3[0].tcm_s5_force_diff) &&
    datas3[0].tcm_s5_force_diff.length > 0
  ) {
    need_y11 = datas3[0].tcm_s5_force_diff
    for (let i = 0; i <= datas3[0].tcm_s5_force_diff.length; i++) {
      need_x11.push(i + 1)
    }
  }
  if (
    Array.isArray(datas3[0].tcm_s4s5_ten_diff) &&
    datas3[0].tcm_s4s5_ten_diff.length > 0
  ) {
    need_y22 = datas3[0].tcm_s4s5_ten_diff
    if (!need_x11) {
      for (let i = 0; i <= datas3[0].tcm_s4s5_ten_diff.length; i++) {
        need_x11.push(i + 1)
      }
    }
  }
  if (
    Array.isArray(datas3[0].tcm_s5_force_diff) &&
    datas3[0].tcm_s5_force_diff.length > 0
  ) {
    need_x11 = []
    for (let i = 0; i < datas3[0].tcm_s5_force_diff.length; i++) {
      need_x11.push(i + 1)
    }
  }
  if (
    Array.isArray(datas3[0].tcm_s4s5_ten_diff) &&
    datas3[0].tcm_s4s5_ten_diff.length > 0
  ) {
    need_x11 = []
    for (let i = 0; i < datas3[0].tcm_s4s5_ten_diff.length; i++) {
      need_x11.push(i + 1)
    }
  }

  if (datas3[0].tcm_s5_tilt_act) {
    need_y33 = datas3[0].tcm_s5_tilt_act
    if (!need_x11) {
      for (let i = 0; i <= datas3[0].tcm_s5_tilt_act.length; i++) {
        need_x11.push(i + 1)
      }
    }
  }
  var myChart = echarts.init(document.getElementById('app5')) //将配置注入到html中定义的容器
  var option = {
    title: {
      text: '生产过程追溯',
      textStyle: {
        fontSize: 16,
        fontWeight: 700,
        color: '#ffffff'
      }
    },
    //color: this.echarts_data.color,
    legend: {
      x: 'center', //可设定图例在左、右、居
      textStyle: {
        // fontWeight: 'bolder', 字体加粗
        fontSize: 12,
        color: '#fff'
      },
      icon: 'roundRect'
    }, // 显示表头
    tooltip: {
      trigger: 'axis',
      formatter: function(params: any) {
        let result = params[0].axisValue + '<br/>';
        params.forEach((param: any) => {
          result += param.marker + param.seriesName + ': ' + param.value.toFixed(3) + '<br/>';
        });
        return result;
      }
    },
    toolbox: {
      iconStyle: {
        borderColor: '#fff'
      },
      feature: {
        dataView: {
          show: true,
          lang: ['数据视图', '关闭', '导出Excel'],
          //optionToContent为重画表格的函数
          optionToContent: function(opt:any) {
            //axisData是你想定义的表格第一列的数据，我这里设置为柱形图的x轴数据
            var axisData = opt.xAxis[0].data
            //tAxis[0]为你想定义的表格第一行的数据
            var txisData = opt.series[0].data
            // console.log(opt)
            var series = opt.series
            //表头
            var tdHeads = '<td  style="padding: 0 10px"></td>'
            var tdBodys = ''
            var nameData = txisData
            // console.log(nameData)
            for (var i = 0; i < nameData.length; i++) {
              tdHeads +=
                '<td style="padding: 0 10px">' + nameData[i] + '</ td >'
            }
            var table =
              '<table id="Mytable" border="1" class="table table-bordered table-striped table-hover" style="width:100%;text-align:center;color: #000;" ><tbody><tr>' +
              tdHeads +
              ' </tr>'
            for (var i = 0, l = axisData.length; i < l; i++) {
              for (var j = 0; j < series.length; j++) {
                if (series[j].data != undefined) {
                  var temp = series[j].data[i]
                  if (temp != null && temp != undefined) {
                    tdBodys += '<td>' + temp + '</td>'
                  } else {
                    tdBodys += '<td></td>'
                  }
                }
              }
              table +=
                '<tr><td style="padding: 0 10px">' +
                axisData[i] +
                '</td>' +
                tdBodys +
                '</tr>'
              tdBodys = ''
            }
            table += '</tbody></table>'
            return table
          },
          //contentToOption为重写"刷新"按钮的语句
          contentToOption: function(HTMLDomElement, opt) {
            let et = XLSX.utils.table_to_book(
              document.getElementById('Mytable')
            )
            let etout = XLSX.write(et, {
              bookType: 'xlsx',
              bookSST: true,
              type: 'array'
            })
            try {
              saveAs(
                new Blob([etout], {
                  type: 'application/octet-stream'
                }),
                'echarts数据' + '-' + new Date().toLocaleString() + '.xlsx'
              )
            } catch (e) {}
            return etout
          }
        },
        magicType: { show: true },
        restore: { show: true },
        saveAsImage: { show: true }
        // dataZoom: {show: true},
      }
    },
    //表头
    grid: {
      left: '1%',
      right: '5%',
      bottom: '6%',
      containLabel: true
    },
    dataZoom: [
      {
        type: 'inside',
        xAxisIndex: [0]
      },
      {
        type: 'inside',
        yAxisIndex: [0]
      }
    ],
    xAxis: {
      axisLine: {
        lineStyle: {
          color: '#ffffff'
        }
      },
      //x轴间隔
      // intercal: 50,
      nameTextStyle: {
        fontSize: 12,
        // padding: [0, -50, 100, 0],
        color: '#ffffff'
      },
      name: '(m)',
      type: 'category',
      data: need_x11
    },
    yAxis: [
      {
        scale: true, //纵坐标自适应
        show:true,
        axisLine: {
          lineStyle: {
            color: '#ffffff'
          }
        },
        nameTextStyle: {
          fontSize: 14,
          padding: [0, 0, 0, 20],
          color: '#ffffff'
        },
        boundaryGap: [0, '50%'],
        type: 'value',
        name: name1,
        position: 'left',
        // offset: 50,
        splitNumber: 10,
        axisLabel: {
          formatter: '{value}',
          textStyle: {
            color: '#ffffff'
          }
        },
        splitLine: {
          show: false
        }
      },
      {
        scale: true, //纵坐标自适应
        show:true,
        boundaryGap: [0, '50%'],
        splitLine: {
          show: false
        },
        type: 'value',
        name: name2,
        position: 'right',
        axisLine: {
          lineStyle: {
            color: '#ffffff',
            width: 1 //这里是为了突出显示加上的
          }
        },
        //防止纵坐标名字重叠
        nameTextStyle: {
          padding: [0, 0, 0, 40],
          fontSize: 14
        },
        axisLabel: {
          formatter: '{value}'
        }
      },
      {
        scale: true, //纵坐标自适应
        boundaryGap: [0, '50%'],
        axisLine: {
          lineStyle: {
            color: '#ffffff',
            width: 1 //这里是为了突出显示加上的
          }
        },
        splitLine: {
          show: false
        },
        type: 'value',
        //name: name3,
        position: 'right',
        axisTick: {
          inside: 'false',
          length: 10
        }
      }
    ],
    series: [
      {
        // name: 'SS轧制力（DS-OS）(10KN)',
        name: name1,
        type: 'line',
        step: 'middle',
        data: need_y11,
        yAxisIndex: 0
      },
      {
        // name: 'SS张力差（DS-OS）(10KN)',
        name: name2,
        type: 'line',
        step: 'start',
        data: need_y22,
        yAxisIndex: 1
      },
      {
        // name: 'S5轧制速度（m/min）',
        name: name3,
        type: 'line',
        step: 'end',
        data: need_y33,
        yAxisIndex: 1
      }
    ]
  }
  myChart.clear()
  myChart.setOption(option)
};

//酸轧生产过程追溯
function echart_tilt(data:any) {
  var need_x11 = []
  var need_y11 = []
  if (
    Array.isArray(data[0].tcm_s5_tilt_act) &&
    data[0].tcm_s5_tilt_act.length > 0
  ) {
    need_y11 = data[0].tcm_s5_tilt_act
    for (let i = 0; i <= data[0].tcm_s5_tilt_act.length; i++) {
      need_x11.push(i + 1)
    }
  }
  yAxis.min = echart.min19
  yAxis.max = echart.max19
  toolbox.feature.myTool = {
    show: true, //是否显示
    title: '定义y轴', //鼠标悬空的提示文字
    icon:
      'path://M659.77002 969.890638 363.679441 969.890638 363.679441 644.667555 33.604864 76.752058l325.225129 0 155.319461 300.952306L669.480172 76.752058 989.844597 76.752058 659.77002 639.812991 659.77002 969.890638z', //这个是阿里icon svg 后 b的全部字符串
    onclick: () => {
      sum = 19
      dialogVisible2.value = true
      dialogTitle2.value = '定义Y轴刻度范围'
    }
  }
  var myChart = echarts.init(document.getElementById('app_tilt')) //将配置注入到html中定义的容器
  var option = {
    title: {
      text: 'S5机架倾斜',
      textStyle: {
        fontSize: 16,
        fontWeight: 700,
        color: '#ffffff'
      }
    },
    //color: this.echarts_data.color,
    legend: {
      x: 'center', //可设定图例在左、右、居
      textStyle: {
        // fontWeight: 'bolder', 字体加粗
        fontSize: 12,
        color: '#fff'
      },
      icon: 'roundRect'
    },
    dataZoom: [
      {
        //X轴滑动条                    {
        type: 'slider', //滑动条
        show: true, //开启
        xAxisIndex: [0],
        start: 0, //初始化时，滑动条宽度开始标度
        end: 100 //初始化时，滑动条宽度结束标度
      }, //X轴内置滑动
      {
        type: 'inside', //内置滑动，随鼠标滚轮展示
        xAxisIndex: [0],
        start: 0, //初始化时，滑动条宽度开始标度
        end: 100 //初始化时，滑动条宽度结束标度
      }
    ],
    tooltip: {
      trigger: 'axis'
    },
    toolbox: toolbox,
    //表头
    grid: {
      left: '3%',
      right: '8%',
      bottom: '6%',
      containLabel: true
    },
    xAxis: {
      axisLine: {
        lineStyle: {
          color: '#ffffff'
        }
      },
      splitLine: {
        show: true,
        lineStyle: {
          type: 'dotted'
        }
      },
      //x轴间隔
      // intercal: 50,
      nameTextStyle: {
        fontSize: 12,
        // padding: [0, -50, 100, 0],
        color: '#ffffff'
      },
      name: '(m)',
      type: 'category',
      data: need_x11
    },
    yAxis: [
      {
        scale: true, //纵坐标自适应
        axisLine: {
          lineStyle: {
            color: '#ffffff'
          }
        },
        min: echart.min19,
        max: echart.max19,
        type: 'value',
        name: 'mm',
        axisLabel: {
          formatter: '{value}',
          textStyle: {
            color: '#ffffff'
          }
        },
        splitLine: {
          show: true,
          lineStyle: {
            type: 'dotted'
          }
        }
      }
    ],
    series: [
      {
        name: '',
        type: 'line',
        data: need_y11
      }
    ]
  }
  myChart.clear()
  myChart.setOption(option)
};
async function findAll2(extid:any) {

  let params = [
    "flatave",
    "flatave_positive",
    "PriTerm",
    "QuaTerm"
  ]

  const graphParam = {
    line: 'TCM2280',
    extid: [extid],
    model: params,
  };
  
  const response = await historyApi.getgraphData(graphParam);
  if (response.data.data.model[0]["PriTerm"] && response.data.data.model[0]["QuaTerm"] ) {
    echart_test6(response.data.data.model[0])
    echart_test6_1(response.data.data.model[0])
    rememberA = [] //二次项
    rememberB = [] //一次项
    rememberC = [] //-b/2a
    rememberR = [] //R方
    for (var i = 0; response.data.data.model[0]["PriTerm"].length > i; i++) {
      rememberA.push(response.data.data.model[0]["QuaTerm"][i].toFixed(2)) //二次项a
      rememberB.push(response.data.data.model[0]["PriTerm"][i].toFixed(2)) //一次项b
      // rememberC.push(response.data.data.model[i].toFixed(2)) //常数
      // if (response.data.data.model[0]["r2_fit2"][i]) {
      //   rememberR.push(response.data.data.model[0]["r2_fit2"][i].toFixed(2)) //R方
      // } else {
      //   rememberR.push(0) //R方
      // }
    }
  } else {
    // this.echarts_no('app_first')
    // this.echarts_no('app_second')
  }
  if (response.data.data.model[0]["flatave"]&&response.data.data.model[0]["flatave_positive"]) {
    echart_test4(response.data.data.model[0])

  } else {
    
  }
};
// 一次项系数
function echart_test6(obj:any) {
      var arrlength = [] //X轴的数组
      var need_y1 = []
      for (let i = 1; i <= obj["PriTerm"].length; i++) {
        arrlength.push(i)
        need_y1.push(Math.floor(obj["PriTerm"][i] * 100) / 100)
      }

      toolbox.feature.myTool = {
        show: true, //是否显示
        title: '定义y轴', //鼠标悬空的提示文字
        icon:
          'path://M659.77002 969.890638 363.679441 969.890638 363.679441 644.667555 33.604864 76.752058l325.225129 0 155.319461 300.952306L669.480172 76.752058 989.844597 76.752058 659.77002 639.812991 659.77002 969.890638z', //这个是阿里icon svg 后 b的全部字符串
        onclick: o => {
          sum = 2
          dialogVisible2.value = true
          dialogTitle2.value = '定义Y轴刻度范围'
        }
      }
      var myChart = echarts.init(document.getElementById('app_first')) //将配置注入到html中定义的容器
      var option = {
        title: {
          text: '一次项系数DS-OS',
          textStyle: {
            fontSize: 16,
            fontWeight: 700,
            color: '#ffffff'
          }
        },
        color: 'yellow',
        toolbox: toolbox,
        //legend: echarts_data.legend, // 显示表头
        tooltip: {
          trigger: 'axis',
          backgroundColor: 'rgba(32, 33, 36,.7)',
          borderColor: 'rgba(32, 33, 36,0.20)',
          borderWidth: 1,
          textStyle: {
            // 文字提示样式
            color: '#fff',
            fontSize: '12'
          },
          axisPointer: {
            // 坐标轴虚线
            type: 'cross',
            label: {
              backgroundColor: '#6a7985'
            }
          }
        }, //数据悬浮
        grid: {
          left: '3%',
          right: '6%',
          bottom: '8%',
          containLabel: true
        },
        dataZoom: [
          {
            //X轴滑动条                    {
            type: 'slider', //滑动条
            show: true, //开启
            xAxisIndex: [0],
            start: 0, //初始化时，滑动条宽度开始标度
            end: 100 //初始化时，滑动条宽度结束标度
          }, //X轴内置滑动
          {
            type: 'inside', //内置滑动，随鼠标滚轮展示
            xAxisIndex: [0],
            start: 0, //初始化时，滑动条宽度开始标度
            end: 100 //初始化时，滑动条宽度结束标度
          }
        ],
        xAxis: {
          type: 'category',
          intercal: 50,
          boundaryGap: false,
          // //XY坐标轴样式修改axisLine
          axisLine: {
            lineStyle: {
              color: '#ffffff'
            }
          },
          splitLine: {
            show: true,
            lineStyle: {
              type: 'dotted'
            }
          },
          nameTextStyle: {
            color: '#ffffff',
            // fontWeight: 'bold',
            fontSize: 12
          },
          name: '(m)',
          data: arrlength
        },
        yAxis: {
          type: 'value',
          min: echart.min2,
          max: echart.max2,
          splitLine: {
            type: 'dotted',
            show: true,
            lineStyle: {
              color: '#65687d'
            }
          },
          axisLine: {
            lineStyle: {
              color: '#ffffff'
            }
          },
          nameTextStyle: {
            padding: [0, 0, 0, 40],
            fontSize: 16,
            color: '#bfbfbf'
          },
          axisLabel: {
            formatter: '{value}',
            textStyle: {
              color: '#bfbfbf' //更改坐标轴文字颜色
            }
          },
          scale: true //纵坐标自适应
        },
        series: [
          {
            name: '一次项系数（蓝色）值越大，DS侧非对称浪形越大',
            type: 'line',
            data: need_y1
          }
        ]
      }
      myChart.setOption(option)
    };
    // 二次项系数
 function echart_test6_1(obj:any) {
      var arrlength = [] //X轴的数组
      var need_y2 = []
      for (let i = 1; i <= obj["QuaTerm"].length; i++) {
        arrlength.push(i)
        need_y2.push(Math.floor(obj["QuaTerm"][i] * 100) / 100)
      }

      toolbox.feature.myTool = {
        show: true, //是否显示
        title: '定义y轴', //鼠标悬空的提示文字
        icon:
          'path://M659.77002 969.890638 363.679441 969.890638 363.679441 644.667555 33.604864 76.752058l325.225129 0 155.319461 300.952306L669.480172 76.752058 989.844597 76.752058 659.77002 639.812991 659.77002 969.890638z', //这个是阿里icon svg 后 b的全部字符串
        onclick: o => {
          sum = 5
          dialogVisible2.value = true
          dialogTitle2.value = '定义Y轴刻度范围'
        }
      }
      var myChart = echarts.init(document.getElementById('app_second')) //将配置注入到html中定义的容器
      var option = {
        title: {
          text: '二次项系数DS-OS',
          textStyle: {
            fontSize: 16,
            fontWeight: 700,
            color: '#ffffff'
          }
        },
        color: 'yellow',
        toolbox: toolbox,
        //legend: echarts_data.legend, // 显示表头
        tooltip: {
          trigger: 'axis',
          backgroundColor: 'rgba(32, 33, 36,.7)',
          borderColor: 'rgba(32, 33, 36,0.20)',
          borderWidth: 1,
          textStyle: {
            // 文字提示样式
            color: '#fff',
            fontSize: '12'
          },
          axisPointer: {
            // 坐标轴虚线
            type: 'cross',
            label: {
              backgroundColor: '#6a7985'
            }
          }
        }, //数据悬浮
        grid: {
          left: '3%',
          right: '6%',
          bottom: '8%',
          containLabel: true
        },
        dataZoom: [
          {
            //X轴滑动条                    {
            type: 'slider', //滑动条
            show: true, //开启
            xAxisIndex: [0],
            start: 0, //初始化时，滑动条宽度开始标度
            end: 100 //初始化时，滑动条宽度结束标度
          }, //X轴内置滑动
          {
            type: 'inside', //内置滑动，随鼠标滚轮展示
            xAxisIndex: [0],
            start: 0, //初始化时，滑动条宽度开始标度
            end: 100 //初始化时，滑动条宽度结束标度
          }
        ],
        xAxis: {
          type: 'category',
          intercal: 50,
          boundaryGap: false,
          // //XY坐标轴样式修改axisLine
          axisLine: {
            lineStyle: {
              color: '#ffffff'
            }
          },
          splitLine: {
            show: true,
            lineStyle: {
              type: 'dotted'
            }
          },
          nameTextStyle: {
            color: '#ffffff',
            // fontWeight: 'bold',
            fontSize: 12
          },
          name: '(m)',
          data: arrlength
        },
        yAxis: {
          type: 'value',
          min: echart.min5,
          max: echart.max5,
          splitLine: {
            type: 'dotted',
            show: true,
            lineStyle: {
              color: '#65687d'
            }
          },
          axisLine: {
            lineStyle: {
              color: '#ffffff'
            }
          },
          nameTextStyle: {
            padding: [0, 0, 0, 40],
            fontSize: 16,
            color: '#bfbfbf'
          },
          axisLabel: {
            formatter: '{value}',
            textStyle: {
              color: '#bfbfbf' //更改坐标轴文字颜色
            }
          },
          scale: true //纵坐标自适应
        },
        series: [
          {
            name: '二次项系数',
            type: 'line',
            data: need_y2
          }
        ]
      }
      myChart.setOption(option)
    };
function echart_test4(obj:any) {
  console.log("obj"+obj) //获取的对象
  var arrlength = [] //X轴的数组
  for (let i = 1; i <= obj["flatave"].length; i++) {
    arrlength.push(i)
  }
  toolbox.feature.myTool = {
    show: true, //是否显示
    title: '定义y轴', //鼠标悬空的提示文字
    icon:
      'path://M659.77002 969.890638 363.679441 969.890638 363.679441 644.667555 33.604864 76.752058l325.225129 0 155.319461 300.952306L669.480172 76.752058 989.844597 76.752058 659.77002 639.812991 659.77002 969.890638z', //这个是阿里icon svg 后 b的全部字符串
    onclick: () => {
      sum = 1
      dialogVisible2.value = true
      dialogTitle2.value = '定义Y轴刻度范围'
    }
  }
  var myChart = echarts.init(document.getElementById('app4'))
  // 指定图表的配置项和数据
  var option4 = {
    title: {
      text: '板形截面IU均值曲线',
      textStyle: {
        fontSize: 14,
        color: '#fbfbfb',
        fontStyle: 'normal',
        fontWeight: 'bold'
      }
    },
    tooltip: {
      trigger: 'axis',
      formatter: function(params: any) {
        let result = params[0].axisValue + '<br/>';
        params.forEach((param: any) => {
          result += param.marker + param.seriesName + ': ' + param.value.toFixed(3) + '<br/>';
        });
        return result;
      }
    },
    grid: {
      left: '3%',
      right: '6%',
      bottom: '8%',
      containLabel: true
    },
    legend: {
      x: 'center', //可设定图例在左、右、居
      data: ['板形截面IU均值曲线', '板形截面IU正值'],
      textStyle: {
        // fontWeight: 'bolder', 字体加粗
        fontSize: 12,
        color: '#ffffff'
      },
      icon: 'roundRect' //图例的形状
    }, // 显示表头
    toolbox: toolbox,
    //color: this.echarts_data.color,
    dataZoom: [
      {
        //X轴滑动条                    {
        type: 'slider', //滑动条
        show: true, //开启
        xAxisIndex: [0],
        start: 0, //初始化时，滑动条宽度开始标度
        end: 100 //初始化时，滑动条宽度结束标度
      }, //X轴内置滑动
      {
        type: 'inside', //内置滑动，随鼠标滚轮展示
        xAxisIndex: [0],
        start: 0, //初始化时，滑动条宽度开始标度
        end: 100 //初始化时，滑动条宽度结束标度
      }
    ],
    xAxis: {
      type: 'category',
      boundaryGap: false,
      axisLabel: {
        show: true,
        textStyle: {
          color: '#fff'
        }
      },
      axisLine: {
        lineStyle: {
          color: '#fff' //改变坐标轴的颜色
        }
      },
      splitLine: {
        show: true,
        lineStyle: {
          type: 'dotted'
        }
      },
      data: arrlength
    },
    yAxis: {
      name: '单位:IU',
      type: 'value',
      scale: true, //纵坐标自适应
      min: echart.min1,
      max: echart.max1,
      splitLine: {
        show: true,
        lineStyle: {
          type: 'dotted'
        }
      },
      axisLabel: {
        formatter: '{value}',
        textStyle: {
          color: '#fff'
        }
      },
      axisLine: {
        lineStyle: {
          color: '#fff' //改变坐标轴的颜色
        }
      }
    },
    series: [
      {
        name: '板形截面IU均值曲线',
        type: 'line',
        smooth: true,
        data: obj["flatave"]
      },
      {
        name: '板形截面IU正值',
        type: 'line',
        smooth: true,
        data: obj["flatave_positive"]
      }
    ]
  }
  // 使用刚指定的配置项和数据显示图表。
  myChart.setOption(option4)
};
// 板形长度序列曲线
async function findAll4(extid:any, row:any) {

  let params = [
    'tcm_shape_channe_0',
    'tcm_shape_channe_1',
    'tcm_shape_channe_2',
    'tcm_shape_channe_4',
    'tcm_shape_channe_5',
    'tcm_shape_channe_6',
    'tcm_shape_channe_7',
    'tcm_shape_channe_8',
    'tcm_shape_channe_9',
    'tcm_shape_channe_10',
    'tcm_shape_channe_11',
    'tcm_shape_channe_12',
    'tcm_shape_channe_13',
    'tcm_shape_channe_14',
    'tcm_shape_channe_15',
    'tcm_shape_channe_16',
    'tcm_shape_channe_17',
    'tcm_shape_channe_18',
    'tcm_shape_channe_19',
    'tcm_shape_channe_20',
    'tcm_shape_channe_21',
    'tcm_shape_channe_22',
    'tcm_shape_channe_23',
    'tcm_shape_channe_24',
    'tcm_shape_channe_25',
    'tcm_shape_channe_26',
    'tcm_shape_channe_27',
    'tcm_shape_channe_28',
    'tcm_shape_channe_29',
    'tcm_shape_channe_30',
    'tcm_shape_channe_31',
    'tcm_shape_channe_32',
    'tcm_shape_channe_33',
    'tcm_shape_channe_34',
    'tcm_shape_channe_35',
    'tcm_shape_channe_36',
    'tcm_shape_channe_37',
    'tcm_shape_channe_38',
    'tcm_shape_channe_39',
    'tcm_shape_channe_40',
    'tcm_shape_channe_41',
    'tcm_shape_channe_42',
    'tcm_shape_channe_43',
    'tcm_shape_channe_44',
    'tcm_shape_channe_45',
    'tcm_shape_channe_46',
    'tcm_shape_channe_47',
    'tcm_shape_channe_48',
    'tcm_shape_channe_49',
    'tcm_shape_channe_50',
    'tcm_shape_channe_51',
    'tcm_shape_channe_52',
    'tcm_shape_channe_53',
    'tcm_shape_channe_54',
    'tcm_shape_channe_55',
    'tcm_shape_channe_56',
    'tcm_shape_channe_57',
    'tcm_shape_channe_58',
    'tcm_shape_channe_59',
    'tcm_shape_channe_60',
    'tcm_shape_channe_61',
    'tcm_shape_channe_62',
    'tcm_shape_channe_63',
    'tcm_s5_strip_speed_act'

  ]

  const graphParam = {
    line: 'TCM2280',
    extid: [extid],
    curve: params,
  };
  const response = await historyApi.getgraphData(graphParam);
  //绘制2D板形图曲线-长度序列
  if (response.data.data.curve[0].tcm_shape_channe_32) {
    let filteredObj = []

    const newItem = Object.fromEntries(
      Object.entries(response.data.data.curve[0]).filter(([key, value]) =>
        {
          if(Array.isArray(value)){
            value.some(num => num !== 0)
          }
          return value;
        }
      )
    );
    filteredObj.push({ ...newItem });
    
    console.log("filteredObj"+filteredObj)

    echart_test7(filteredObj)
    plateCurveData.value = response.data.data.curve[0]
  } else {
    plateCurveData.value = []
    echarts_no('app7')
    echarts_no('app9')
  }
  //绘制S5出口厚度和速度曲线-长度序列
  if (!response.data.data.curve[0].tcm_s5_strip_speed_act) {
    echarts_no('app11', 200)
  } else {
    echart_test11(response.data.data.curve[0].tcm_s5_strip_speed_act)
  }
}

// 无数据时：展示暂无数据
function echarts_no(e:any, height = 400) {
  console.log("e"+e)
  const dom = document.getElementById(e)
  if(dom!=null){
    dom.innerHTML = '暂无数据'
    dom.style.cssText =
    'text-align:center; color: #999; border: none;line-height:' +
    height +
    'px'
    dom.removeAttribute('_echarts_instance_')
  }
  
};

    // 板形2D（长度序列）
function echart_test7(datas10:any) {
  var need_x11 = []
  console.log(datas10)
  for (var i = 0; i < datas10[0].tcm_shape_channe_11.length; i++) {
    need_x11.push(i + 1)
  }
  let res:any = []
  let max = 0 //这个值用于计算两边通道有多个全为0的通道个数，最后用来补齐拟合曲线的个数
  Object.entries(datas10[0]).forEach(([key, value]) => {
    const macthReq = /tcm_shape_channe_(\d+)$/.exec(key)
    if (!macthReq || value.every(i => i === 0)) return //去掉所有通道数组全为0的通道
    const index = Number(macthReq[1]) //根据曲线名称例如channel_26,用正则获取通道号数字
    max = Math.max(max, index) //取最大的且通道数据不全为0的通道号

    value.forEach((v:any, i:any) => {
      res.push([i, index - 1, v]) //组装板形图的数据
      // 第一个元素代表X轴、第二个Y轴、第三个是值
    })
  })
  // console.log(res)
  // 取第一米的各通道数据，用于默认显示第一米板形截面图
  let Tuglie = []
  for (var x = 0; x < res.length; x++) {
    if (res[x]['0'] == 1) {
      Tuglie.push(res[x])
    }
  }
  // 将第一米界面的数据处理，排序过后从二维数组中，取出对应板形值，放置在一元数组，用来绘制截面图
  let list:any = []
  // console.log(this.Tuglie.sort((a, b) => a[1] - b[1]))
  list = Tuglie.sort((a, b) => a[1] - b[1])
    .map(item => {
      return item[2]
    })
    // .reverse()
    .join(',')
  var myChart = echarts.init(document.getElementById('app7')) //将配置注入到html中定义的容器
  // prettier-ignore
  let days = [
    'c_0', 'c_1',
    'c_2', 'c_3', 'c_4', 'c_5','c_6', 'c_7', 'c_8', 'c_9','c_10',
    'c_11', 'c_12', 'c_13', 'c_14','c_15', 'c_16', 'c_17', 'c_18','c_19',
    'c_20', 'c_21', 'c_22', 'c_23','c_24','c_25','c_26','c_27','c_28','c_29',
    'c_30','c_31','c_32','c_33','c_34','c_35','c_36','c_37','c_38','c_39','c_40',
    'c_41','c_42','c_43','c_44','c_45','c_46','c_47','c_48','c_49','c_50','c_51',
    'c_52','c_53','c_54','c_55','c_56','c_57','c_58','c_59','c_60','c_61','c_62','c_63'
  ];
  //计算单侧边部通道需要补0的个数
  let listMxsMin = days.length - max
  let a1:any = []
  for (var i = 0; i < listMxsMin; i++) {
    a1.push('0.00')
  }
  //拟合方程开始
  let newX = list.split(',')
  let zeroPoint = parseInt(newX.length / 2) //取所有通道中间点
  let leftX = []
  let rightX = []
  //存放X正半轴
  for (let i = 0; i < zeroPoint; i++) {
    leftX.push(parseFloat(((2 * i + 1) / newX.length).toFixed(2)))
  }
  //存放X负半轴
  for (let i = 1; i <= zeroPoint; i++) {
    rightX.push(parseFloat(((-2 * i + 1) / newX.length).toFixed(2)))
  }
  //拼接成一个完整的X轴
  let allXaxis = rightX.reverse().concat(leftX)
  let allYaxis = []
  allXaxis.forEach((item, index) => {
    // 计算a*x平方+b*x+c
    allYaxis.push(
      parseFloat(
        rememberA[0] * Math.pow(item, 2) * 1 +
          rememberB[0] * item * 1 +
          rememberC[0] * 1
      ).toFixed(2) * 1
    )
  })
  // 最后补齐两侧通道为0的通道的数据，保证元素个数与通道号一致
  for (let i = 0; i < listMxsMin; i++) {
    allYaxis.push('')
    allYaxis.unshift('')
  }

  let titleA = rememberA[0]
  let titleB = rememberB[0]
  let titleC = rememberC[0]
  let titleR = rememberR[0]
  // 取第一米的板形截面数据，并按照升序排列，保证通道后由小到大
  var listST = []
  listST = res
    .filter(i => i[0] === 1)
    .sort((a:any, b:any) => a[1] - b[1])
    .map(i => i[2])
  // 补齐板形截面柱状图两侧通道个数，保证元素个数与通道号一致
  var lnewaWa = a1.join() + ',' + listST + ',' + a1.join()
  find_singleChanel(formData, clickChanel)
  echart_test9(
    lnewaWa,
    days,
    1,
    allYaxis,
    titleA,
    titleB,
    titleC,
    titleR
  )
  var option = {
    title: {
      text: '板形仪通道号(长度序列)' + formData,
      textStyle: {
        color: '#ccc',
        fontStyle: 'normal',
        fontWeight: 'bold',
        fontFamily: 'sans-serif',
        fontSize: 18
      }
    },
    tooltip: {
      position: 'top'
    },
    grid: {
      left: '3%',
      right: '6%',
      containLabel: true
    },
    // dataZoom: [
    //   {
    //     //X轴滑动条                    {
    //     type: 'slider', //滑动条
    //     show: true, //开启
    //     xAxisIndex: [0],
    //     start: 0, //初始化时，滑动条宽度开始标度
    //     end: 100 //初始化时，滑动条宽度结束标度
    //   }, //X轴内置滑动
    //   {
    //     type: 'inside', //内置滑动，随鼠标滚轮展示
    //     xAxisIndex: [0],
    //     start: 0, //初始化时，滑动条宽度开始标度
    //     end: 100 //初始化时，滑动条宽度结束标度
    //   }
    // ],
    xAxis: {
      axisLine: {
        lineStyle: {
          color: '#ffffff',
          width: 1 //这里是为了突出显示加上的
        }
      },
      name: '(m)',
      nameTextStyle: {
        fontSize: 15,
        padding: [0, 0, 0, -10],
        color: '#ffffff'
      },
      type: 'category',
      data: need_x11
      // splitArea: {
      //   show: true
      // }
    },
    yAxis: {
      axisLine: {
        lineStyle: {
          color: '#ffffff',
          width: 1 //这里是为了突出显示加上的
        }
      },
      nameTextStyle: {
        fontSize: 10,
        padding: [0, 0, 0, -10],
        color: '#ffffff'
      },
      type: 'category',
      data: days
      // splitArea: {
      //   show: true
      // }
    },
    legend: {
      left: 'center',
      textStyle: {
        fontSize: 18, //字体大小
        color: '#ffffff' //字体颜色
      }
    },
    visualMap: {
      min: -25,
      max: 25,
      calculable: true,
      orient: 'vertical',
      left: 'right',
      top: 'center',
      realtime: false,
      textStyle: {
        color: '#ffffff'
      },
      inRange: {
        color: [
          'RGB(0,10,255)',
          'RGB(0,150,255)',
          'RGB(0,199,255)',
          '#11fff9',
          'RGB(0,255,0)',
          '#FFF500',
          'RGB(255,230,0)',
          'RGB(249, 102, 72)',
          'RGB(255,0,0)'
        ]
      }
    },
    series: [
      {
        pointSize: 10, // 设置热力图上点的大小
        // name: '带钢板形2D图',
        type: 'heatmap',
        data: res.sort((a:any, b:any) => a[0] - b[0])
      }
    ]
  }
  //使用刚指定的配置项和数据显示图表。
  // myChart.setOption(option, true)
  //清空画布，防止缓存
  myChart.clear()
  //使用刚指定的配置项和数据显示图表。mouseover
  myChart.setOption(option, true)
  myChart.getZr().on('click', params => {
    /* 通过获取echarts上面点击的区域是在第几格，根据索引来判断数据 */
    let pointInPixel = [params.offsetX, params.offsetY]
    var lattice:any = ''
    if (myChart.containPixel('grid', pointInPixel)) {
      var xIndex:any = myChart.convertFromPixel(
        { seriesIndex: 0 },
        pointInPixel
      )[0]
      var yIndex = myChart.convertFromPixel(
        { seriesIndex: 0 },
        pointInPixel
      )[1]
      lattice = xIndex + 1
      clickChanel = yIndex
      find_singleChanel(formData, clickChanel)
    }
    Tuglie = []
    for (var x = 0; x < res.length; x++) {
      if (res[x]['0'] == xIndex) {
        Tuglie.push(res[x])
      }
    }
    var list:any = []
    // console.log(this.Tuglie.sort((a, b) => a[1] - b[1]))
    list = Tuglie.sort((a, b) => a[1] - b[1])
      .map(item => {
        return item[2]
      })
      // .reverse()
      .join(',')
    //方程开始
    let newX = list.split(',')
    let zeroPoint = parseInt(newX.length / 2) //取中间点
    let leftX = []
    let rightX = []
    //存放X正半轴
    for (let i = 0; i < zeroPoint; i++) {
      leftX.push(parseFloat(((2 * i + 1) / newX.length).toFixed(2)))
    }
    //存放X负半轴
    for (let i = 1; i <= zeroPoint; i++) {
      rightX.push(parseFloat(((-2 * i + 1) / newX.length).toFixed(2)))
    }
    //拼接成一个完整的X轴
    let allXaxis = rightX.reverse().concat(leftX)
    let allYaxis = []
    allXaxis.forEach((item, index) => {
      // a*x平方+b*x+c
      allYaxis.push(
        parseFloat(
          rememberA[lattice - 1] * Math.pow(item, 2) * 1 +
            rememberB[lattice - 1] * item * 1 +
            rememberC[lattice - 1] * 1
        ).toFixed(2) * 1
      )
    })
    //补齐数组
    for (let i = 0; i < listMxsMin; i++) {
      allYaxis.push('')
      allYaxis.unshift('')
    }

    let titleA = rememberA[lattice - 1]
    let titleB = rememberB[lattice - 1]
    let titleC = rememberC[lattice - 1]
    let titleR = rememberR[lattice - 1]
    console.log(rememberA)
    var lnewa = a1.join() + ',' + list + ',' + a1.join()
    echart_test9(
      lnewa,
      days,
      lattice,
      allYaxis,
      titleA,
      titleB,
      titleC,
      titleR
    )
  })
};

 // 板形长度序列曲线
async function find_singleChanel(extid:any, chanel:any) {
  // Allow full channel range 0–63 (heatmap supports up to 64 channels)
  if (chanel < 0 || chanel > 63) {
    return
  }
  let chanel_f=[];
  chanel_f.push('tcm_shape_channe_' + chanel)
  let str='tcm_shape_channe_' + chanel;

  const graphParam = {
    line: 'TCM2280',
    extid: [extid],
    curve: chanel_f,
  };
  let res = await historyApi.getgraphData(graphParam);
  //绘制2D板形图曲线-长度序列
  if (
    Array.isArray(res.data.data.curve[0][str]) &&
    res.data.data.curve[0][str].length > 0
  ) {
    echart_singleChanel(res.data.data.curve[0][str], str, 'app_chanel')
  } else {
    echarts_no('app_chanel')
  }
};

function echart_singleChanel(data:any, title:any, id:any) {
  var need_x11 = []
  var need_y11 = []
  need_y11 = data
  for (let i = 0; i <= data.length; i++) {
    need_x11.push(i + 1)
  }
  toolbox.feature.myTool = {
    show: true, //是否显示
    title: '定义y轴', //鼠标悬空的提示文字
    icon:
      'path://M659.77002 969.890638 363.679441 969.890638 363.679441 644.667555 33.604864 76.752058l325.225129 0 155.319461 300.952306L669.480172 76.752058 989.844597 76.752058 659.77002 639.812991 659.77002 969.890638z', //这个是阿里icon svg 后 b的全部字符串
    onclick: () => {
      sum = 18
      dialogVisible2.value = true
      dialogTitle2.value = '定义Y轴刻度范围'
    }
  }
  var myChart = echarts.init(document.getElementById(id)) //将配置注入到html中定义的容器
  var option = {
    title: {
      text: title,
      textStyle: {
        fontSize: 14,
        color: '#ffffff'
      }
    },
    color: 'yellow',
    // legend: {
    //   x: 'center', //可设定图例在左、右、居
    //   textStyle: {
    //     // fontWeight: 'bolder', 字体加粗
    //     fontSize: 12,
    //     color: '#fff'
    //   },
    //   icon: 'roundRect'
    // },
    toolbox: toolbox,
    tooltip: {
      trigger: 'axis'
    },
    //表头
    grid: {
      left: '3%',
      right: '5%',
      top: '15%',
      bottom: '18%',
      containLabel: true
    },
    xAxis: {
      axisLine: {
        lineStyle: {
          color: '#ffffff'
        }
      },
      splitLine: {
        show: true,
        lineStyle: {
          type: 'dotted'
        }
      },
      // intercal: 50,
      nameTextStyle: {
        fontSize: 12,
        // padding: [0, -50, 100, 0],
        color: '#ffffff'
      },
      name: '(m)',
      type: 'category',
      data: need_x11
    },
    yAxis: [
      {
        scale: true, //纵坐标自适应
        axisLine: {
          lineStyle: {
            color: '#ffffff'
          }
        },
        min: echart.min18,
        max: echart.max18,
        type: 'value',
        name: '',
        axisLabel: {
          formatter: '{value}',
          textStyle: {
            color: '#ffffff'
          }
        },
        splitLine: {
          show: true,
          lineStyle: {
            type: 'dotted'
          }
        }
      }
    ],
    series: [
      {
        name: '',
        type: 'line',
        data: need_y11.map(value => value / 20)
      }
    ]
  }
  myChart.clear()
  myChart.setOption(option)
};
//长度序列第几米
function echart_test9(
  data:any,
  days:any,
  lattice:any,
  allYaxis:any,
  titleA:any,
  titleB:any,
  titleC:any,
  titleR:any
) {
  var myChart = echarts.init(document.getElementById('app9'))
  // 指定图表的配置项和数据
  var option = {
    animation: false,
    title: [
      {
        text: '第' + lattice + '米板形曲线',
        textStyle: {
          fontSize: 18,
          color: '#ccc'
        }
      },
      {
        //subtext: 'Y=' + titleA + '*X^2+' + titleB + '*X+' + titleC,
        // itemGap: 12, //主副标题间距
        right: 'right', //副标题位置
        top: '0px',
        subtextStyle: {
          fontSize: 12,
          color: '#ccc'
        }
      },
      {
        //subtext: '拟合度R²=' + titleR,
        // itemGap: 12, //主副标题间距
        right: 'right', //副标题位置
        top: '15px',
        subtextStyle: {
          fontSize: 12,
          color: '#ccc'
        }
      }
    ],
    tooltip: {
      trigger: 'axis'
    },
    grid: {
      left: '5%',
      right: '8%',
      containLabel: true
    },
    toolbox: {
      show: false,
      feature: {
        dataZoom: {
          yAxisIndex: 'none'
        },
        dataView: { readOnly: false },
        magicType: { type: ['line', 'bar'] },
        restore: {},
        saveAsImage: {}
      }
    },
    legend: {
      textStyle: {
        color: '#fff'
      }
    },
    dataZoom: [
      {
        type: 'slider',
        xAxisIndex: 0,
        filterMode: 'none'
      },

      {
        type: 'inside',
        xAxisIndex: 0,
        filterMode: 'none'
      }
    ],
    // 横轴显示通道，纵轴显示 IU 数值
    xAxis: {
      type: 'category',
      name: '',
      boundaryGap: true,
      axisLabel: {
        show: true,
        textStyle: {
          color: '#fff'
        }
      },
      axisLine: {
        lineStyle: {
          color: '#fff'
        }
      },
      splitLine: { show: false },
      data: days
    },
    yAxis: {
      type: 'value',
      name: '(IU)',
      max: 50,
      min: -50,
      boundaryGap: false,
      axisLabel: {
        formatter: '{value}',
        textStyle: {
          color: '#fff'
        }
      },
      axisLine: {
        lineStyle: {
          color: '#fff'
        }
      },
      splitLine: {
        show: true,
        lineStyle: { type: 'dotted' }
      }
    },
    series: [
      {
        type: 'bar',
        smooth: true,
        data: data.split(',').map((v:any)=> Number(v)),
        color: '#00FFE3'
      },
      {
        type: 'line',
        smooth: true,
        data: allYaxis,
        color: 'yellow'
      }
    ]
  }
  //清空画布，防止缓存
  myChart.clear()
  //使用刚指定的配置项和数据显示图表。
  myChart.setOption(option, true)
};
//长度序列速度
function echart_test11(datas3:any) {
  var need_x11 = []
  var need_y = []
  for (let i = 0; i <= datas3.length; i++) {
    need_x11.push(i + 1)
    need_y.push(Math.floor(datas3[i] * 100) / 100)
  }
  xAxis.data = need_x11
  title.text = '速度-长度序列(m/min)'
  yAxis.min = echart.min3
  yAxis.max = echart.max3
  toolbox.feature.myTool = {
    show: true, //是否显示
    title: '定义y轴', //鼠标悬空的提示文字
    icon:
      'path://M659.77002 969.890638 363.679441 969.890638 363.679441 644.667555 33.604864 76.752058l325.225129 0 155.319461 300.952306L669.480172 76.752058 989.844597 76.752058 659.77002 639.812991 659.77002 969.890638z', //这个是阿里icon svg 后 b的全部字符串
    onclick: () => {
      sum = 3
      dialogVisible2.value = true
      dialogTitle2.value = '定义Y轴刻度范围'
    }
  }
  var myChart = echarts.init(document.getElementById('app11')) //将配置注入到html中定义的容器
  var option = {
    // color: echarts_data.color,
    title: title,
    tooltip: tooltip,
    toolbox: toolbox,
    legend: legend,
    grid: {
      left: '3%',
      right: '5%',
      top: '15%',
      bottom: '18%',
      containLabel: true
    },
    dataZoom: [
      {
        //X轴滑动条                    {
        type: 'slider', //滑动条
        show: true, //开启
        xAxisIndex: [0],
        start: 0, //初始化时，滑动条宽度开始标度
        end: 100 //初始化时，滑动条宽度结束标度
      }, //X轴内置滑动
      {
        type: 'inside', //内置滑动，随鼠标滚轮展示
        xAxisIndex: [0],
        start: 0, //初始化时，滑动条宽度开始标度
        end: 100 //初始化时，滑动条宽度结束标度
      }
    ],
    xAxis: xAxis,
    yAxis: yAxis,
    series: {
      // name: 'S5轧制速度（m/min）',
      name: '速度',
      type: 'line',
      step: 'start',
      data: need_y
    }
  }
  myChart.setOption(option)
};

const getOverallResultClass = (result: any) => {
    console.log("result"+result)
    return result.clostFlag === 0 ? 'result-ok' : 'result-no';
  };
  const formatDateTime = (dateTime: string | null | undefined): string => {
    if (!dateTime) return '-';
    
    try {
      // 如果是数字格式的时间戳，先转换为字符串
      const dateStr = String(dateTime);
      
      // 处理不同格式的时间字符串
      let date: Date;
      
      // 如果是纯数字格式 (YYYYMMDDHHmmss)
      if (/^\d{14}$/.test(dateStr)) {
        const year = parseInt(dateStr.substring(0, 4));
        const month = parseInt(dateStr.substring(4, 6)) - 1;
        const day = parseInt(dateStr.substring(6, 8));
        const hour = parseInt(dateStr.substring(8, 10));
        const minute = parseInt(dateStr.substring(10, 12));
        const second = parseInt(dateStr.substring(12, 14));
        date = new Date(year, month, day, hour, minute, second);
      }
      // 如果是标准日期时间格式
      else if (dateStr.includes('-') || dateStr.includes('/')) {
        date = new Date(dateStr);
      }
      // 其他格式尝试直接解析
      else {
        date = new Date(dateStr);
      }
      
      // 检查日期是否有效
      if (isNaN(date.getTime())) {
        return '-';
      }
      
      // 格式化为 YYYY-MM-DD HH:mm:ss
      const pad = (num: number) => num.toString().padStart(2, '0');
      return `${date.getFullYear()}-${pad(date.getMonth() + 1)}-${pad(date.getDate())} ${pad(date.getHours())}:${pad(date.getMinutes())}:${pad(date.getSeconds())}`;
    } catch (error) {
      console.error('时间格式化错误:', error);
      return '-';
    }
  };



</script>

<style scoped>
/* --- Global Styles (Mostly copied) --- */
.layout-judge-container {
  background-color: #0a1a3a; 
  color: #c0c4cc; 
  padding: 15px;
  height: 100vh; 
  box-sizing: border-box;
  font-family: 'Microsoft YaHei', 'Segoe UI', sans-serif;
  font-size: 13px;
  overflow: hidden; 
  scrollbar-width: thin;
  scrollbar-color: #3a5a8a #142a52;
  display: flex;
  flex-direction: column;
}



.layout-judge-container > *:not(:last-child):not(.detail-section) { 
  margin-bottom: 15px;
}

.layout-judge-container::-webkit-scrollbar {
  width: 6px;
  height: 6px;
}

.layout-judge-container::-webkit-scrollbar-track {
  background: #142a52;
  border-radius: 3px;
}

.layout-judge-container::-webkit-scrollbar-thumb {
  background-color: #3a5a8a;
  border-radius: 3px;
}

.layout-judge-container::-webkit-scrollbar-thumb:hover {
  background-color: #5a7aa4;
}

/* --- Search Panel (Copied) --- */
.search-panel {
  background-color: #1c2d5a;
  padding: 10px 15px;
  border-radius: 3px;
  flex-shrink: 0;
}

.search-row {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  margin-bottom: 10px;
}

.search-row:last-child {
  margin-bottom: 0;
}

.search-item {
  display: flex;
  align-items: center;
  margin-right: 15px; /* Adjusted margin */
  margin-bottom: 10px; /* Added margin for wrapping */
}

.label {
  color: #c0c4cc;
  margin-right: 8px;
  white-space: nowrap;
  min-width: 65px; /* Adjusted width */
  text-align: right;
}

:deep(.custom-date-picker.el-date-editor) {
  width: 260px !important;
  height: 28px;
  background-color: #0a1a3a;
  border: 1px solid #3a5a8a;
  box-shadow: none;
}

:deep(.custom-date-picker .el-range-input),
:deep(.custom-date-picker .el-range-separator) {
  color: #c0c4cc;
  font-size: 13px;
  height: 26px;
  line-height: 26px;
}

:deep(.custom-date-picker .el-range-separator) {
  padding: 0;
}

:deep(.custom-date-picker .el-input__icon) {
  line-height: 28px;
  color: #c0c4cc;
}

.range-item .label {
  min-width: 65px; /* Adjusted width */
}

.range-input {
  width: 80px;
}

:deep(.range-input .el-input__wrapper) {
  padding-left: 8px;
  padding-right: 8px;
}

.separator {
  margin: 0 5px;
  color: #c0c4cc;
}

.custom-input,
.custom-select,
.range-input,
:deep(.el-input__wrapper),
:deep(.el-select__wrapper) {
  height: 28px;
  line-height: 28px;
  background-color: #0a1a3a !important;
  border: 1px solid #3a5a8a !important;
  border-radius: 3px !important;
  color: #c0c4cc !important;
  box-shadow: none !important;
  font-size: 13px !important;
}

:deep(.el-input__inner) {
  color: #c0c4cc !important;
  height: 26px !important;
  line-height: 26px !important;
}

:deep(.custom-select .el-select__placeholder),
:deep(.custom-select .el-select__caret) {
  color: #c0c4cc;
}

.custom-input {
  width: 150px;
}

.custom-select {
  width: 120px; /* Adjusted width */
}

.search-actions {
  margin-left: auto;
  display: flex;
  align-items: center;
  padding-left: 20px; /* Ensure spacing */
}

.btn {
  height: 28px;
  padding: 0 15px;
  border: none;
  border-radius: 3px;
  font-size: 13px;
  cursor: pointer;
  margin-left: 10px;
  color: #fff;
}

.query-btn {
  background-color: #2979ff;
}
.query-btn:hover {
  background-color: #5393ff;
}

.reset-btn {
  background-color: #3a5a8a;
}
.reset-btn:hover {
   background-color: #5a7aa4;
}

.export-btn {
  background-color: #2979ff;
}
.export-btn:hover {
  background-color: #5393ff;
}

/* --- Main Layout Wrappers --- */
.resizable-area-wrapper {
  display: flex;
  flex-grow: 1;
  min-height: 0; /* Important for flex shrinking */
  gap: 10px; /* Add gap between table area and selector */
}

.table-content-wrapper {
  display: flex;
  flex-direction: column;
  flex-grow: 1;
  min-width: 0; /* Allow shrinking */
  overflow: hidden; /* Contain splitter and panels */
}

/* --- Top Panel (Table + Pagination) --- */
.top-panel-wrapper {
  display: flex;
  flex-direction: column;
  /* height: 60%; */ /* Initial height, can be adjusted */
  flex-basis: 40%; /* Use flex-basis for initial size */
  min-height: 280px; /* Min height */
  overflow: hidden; 
}

.table-panel {
  flex-grow: 1; 
  min-height: 0;
  overflow: auto; /* Enable scrollbars for table content */
  /* background/padding from previous styles */
  background-color: #1c2d5a;
  padding: 5px;
  border-radius: 3px;
  display: flex; /* Keep display: flex if needed by el-table internal */
  margin-bottom: 10px; /* Prevent covering content below */
}

/* Ensure el-table itself doesn't force 100% width */
:deep(.table-panel .el-table) {
  /* Maybe remove width: 100% if it exists implicitly? */
}

.pagination-panel {
  flex-shrink: 0;
  /* Styles copied */
  background-color: #1c2d5a;
  padding: 8px 15px;
  border-radius: 3px;
  display: flex;
  justify-content: flex-end;
  align-items: center;
  margin-top: 6px; /* Add separation from table */
}

/* --- Splitter (Copied) --- */
.splitter {
  height: 8px;
  background-color: #3a5a8a; 
  cursor: row-resize;
  flex-shrink: 0; 
  border-top: 1px solid #5a7aa4;
  border-bottom: 1px solid #5a7aa4;
}
.splitter:hover {
  background-color: #5a7aa4; 
}

/* --- Detail Panel (Copied/Adjusted) --- */
.detail-panel {
  flex: 1; /* Grow to fill remaining space */
  min-height: 150px; 
  overflow: auto; 
  /* padding-top: 15px; */ /* Remove padding if splitter provides separation */
  /* border-top: 1px solid #3a5a8a; */ /* Remove border if splitter provides separation */
  margin-top: 6px; /* Ensure it won't be visually covered by list */
}

/* --- Column Selector (New Position) --- */
.column-selector {
  flex-shrink: 0;
  width: 180px; /* Adjust width as needed */
  background-color: #1c2d5a; /* Match panel background */
  border: 1px solid #3a5a8a;
  border-radius: 4px;
  padding: 10px 15px;
  overflow-y: auto;
  height: 100%; /* Take full height of the wrapper */
  box-sizing: border-box;
  scrollbar-width: thin;
  scrollbar-color: #3a5a8a #142a52;
}
/* ... Rest of column selector styles (checkboxes etc copied) ... */
.column-selector::-webkit-scrollbar { /* ... */ }
.column-selector::-webkit-scrollbar-track { /* ... */ }
.column-selector::-webkit-scrollbar-thumb { /* ... */ }
.column-selector .el-checkbox-group { /* ... */ }
.column-selector .el-checkbox { /* ... */ }
:deep(.column-selector .el-checkbox__label) { /* ... */ }
:deep(.column-selector .el-checkbox__inner) { /* ... */ }
:deep(.column-selector .el-checkbox__input.is-checked .el-checkbox__inner), 
:deep(.column-selector .el-checkbox__input.is-indeterminate .el-checkbox__inner) { /* ... */ }


/* --- Copied Styles (Ensure consistency) --- */
:deep(.el-table) { /* ... */ }
:deep(.el-table__header-wrapper th.el-table__cell) { /* ... */ }
:deep(.el-table__body td.el-table__cell) { /* ... */ }
:deep(.el-table__body tr.current-row > td.el-table__cell), 
:deep(.el-table__body tr.selected-row > td.el-table__cell) { /* ... */ }
.action-btn { /* ... */ }
/* ... pagination styles ... */
.summary-table-section { /* ... */ }
.chart-sections-wrapper { /* ... */ }
.detail-section { /* ... */ }
.section-header { /* ... */ }
.stats-table-container { /* ... */ }
.stats-table-container :deep(.el-table) { /* ... */ }
.chart-container { /* ... */ }
.legend { /* ... */ }
.chart-placeholder { /* ... */ }

/* Ensure chart placeholders have height */
.chart-placeholder {
  min-height: 200px; 
  height: 100%;
  width: 100%;
}

/* --- Ensure Button Styles are Present --- */
.action-btn {
  padding: 3px 8px;
  font-size: 12px;
  border: none;
  border-radius: 3px;
  margin: 0 2px;
  cursor: pointer;
  color: #fff;
}
.rate-btn { background-color: #e6a23c; }
.rate-btn:hover { background-color: #ebb563; }
.abnormal-btn { background-color: #2b0ae4; }
.abnormal:hover { background-color: #2b0ae4; }
.analysis-btn { background-color: #67c23a; }
.analysis-btn:hover { background-color: #85ce61; }

/* --- Ensure Selected Row Styles are Present --- */
:deep(.el-table__body tr.current-row > td.el-table__cell),
:deep(.el-table__body tr.selected-row > td.el-table__cell) { 
  background-color: #263451 !important;
  color: #fff !important;
}
:deep(.el-table__body tr.current-row > td.el-table-column--fixed-right),
:deep(.el-table__body tr.selected-row > td.el-table-column--fixed-right) {
   background-color: #263451 !important;
}

/* --- Detail Panel --- */
.detail-panel {
  /* ... existing styles ... */
}

.summary-table-section {
  /* ... existing styles ... */
}

/* Removed .chart-sections-wrapper grid styles */
/* New styles for horizontal chart layout */
.charts-row {
  display: flex;
  gap: 15px; 
  margin-top: 15px; /* Add margin above the chart row */
}

.chart-section { /* Style for individual chart sections in the row */
  flex: 1;
  min-width: 0; /* Allow shrinking */
  /* Keep existing .detail-section styles like background, border-radius */
  background-color: #1c2d5a;
  border-radius: 3px;
  overflow: hidden;
  display: flex; /* Ensure header and chart container stack vertically */
  flex-direction: column;
}

.chart-container {
   /* ... existing styles ... */
   flex-grow: 1; /* Allow chart container to fill vertical space */
}

.chart-placeholder {
  /* ... existing styles ... */
}

:deep(.el-table .cell) {
  line-height: 14px;
}



#data-view {
  width: 100%;
  height: 100%;
  color: #fff;
}

.dv-border-box-11 {
  width: 100%;
  height: auto;
  padding: 4% 1% 1%;
  color: #fff;
}

:deep(.layout-dialog){
  background: #263451 !important;
  border-radius: 12px;
  box-shadow: 0 8px 32px 0 rgba(0,40,120,0.35);
  padding: 0;
}

:deep(.el-dialog__title){
  color: #fff !important;
}

.dv-border-box-10 {
  width: 49%;
  margin: 5px;
  display: inline-block;
  padding: 1%;
}

.layout-search .el-form .el-form-item {
  margin-bottom: 12px;
}

::v-deep .layout-search .el-form .el-form-item .el-input__inner {
  width: 100%;
}

  .result-ok {
    color: #67c23a;
    /* Green */
    font-weight: bold;
    background-color: rgba(103, 194, 58, 0.1);
    padding: 2px 6px;
    border-radius: 3px;
  }

  .result-no {
    color: #ff4d4f;
    /* Red */
    font-weight: bold;
    background-color: rgba(255, 77, 79, 0.1);
    padding: 2px 6px;
    border-radius: 3px;
  }

  /* 异常明细弹窗样式 */
  :deep(.abnormal-dialog) {
    background: #1a2a4a !important;
    border-radius: 12px;
    box-shadow: 0 8px 32px 0 rgba(0,40,120,0.35);
    border: 1px solid #3a5a8a;
    animation: dialogFadeIn 0.3s ease-out;
  }

  @keyframes dialogFadeIn {
    from {
      opacity: 0;
      transform: scale(0.9) translateY(-20px);
    }
    to {
      opacity: 1;
      transform: scale(1) translateY(0);
    }
  }

  :deep(.abnormal-dialog .el-dialog__header) {
    background: linear-gradient(135deg, #2a5caa 0%, #1e3a6f 100%);
    border-radius: 12px 12px 0 0;
    padding: 15px 20px;
    border-bottom: 2px solid #3a5a8a;
  }

  :deep(.abnormal-dialog .el-dialog__title) {
    color: #fff !important;
    font-size: 16px;
    font-weight: bold;
  }

  :deep(.abnormal-dialog .el-dialog__headerbtn .el-dialog__close) {
    color: #fff !important;
    font-size: 18px;
  }

  :deep(.abnormal-dialog .el-dialog__body) {
    padding: 0;
    background: #0a1a3a;
    border-radius: 0 0 12px 12px;
  }

  /* 异常明细弹窗内容样式 */
  .abnormal-dialog-content {
    background: #0a1a3a;
    color: #c0c4cc;
    font-family: 'Microsoft YaHei', 'Segoe UI', sans-serif;
    font-size: 13px;
    height: 100%;
    display: flex;
    flex-direction: column;
  }

  /* 搜索面板样式 */
  .abnormal-search-panel {
    background: linear-gradient(135deg, #1c2d5a 0%, #142a52 100%);
    padding: 15px 20px;
    border-bottom: 2px solid #3a5a8a;
    flex-shrink: 0;
  }

  .abnormal-search-panel .search-row {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 15px;
  }

  .abnormal-search-panel .search-item {
    display: flex;
    align-items: center;
    gap: 8px;
  }

  .abnormal-search-panel .label {
    color: #c0c4cc;
    font-weight: 500;
    white-space: nowrap;
    min-width: 80px;
  }

  .abnormal-search-panel .custom-input {
    height: 32px;
    background-color: #0a1a3a !important;
    border: 1px solid #3a5a8a !important;
    border-radius: 6px !important;
    color: #c0c4cc !important;
    font-size: 13px !important;
  }

  .abnormal-search-panel .custom-input:focus {
    border-color: #2979ff !important;
    box-shadow: 0 0 0 2px rgba(41, 121, 255, 0.2) !important;
  }

  .abnormal-search-panel .search-actions {
    margin-left: auto;
    display: flex;
    gap: 10px;
  }

  .abnormal-search-panel .btn {
    height: 32px;
    padding: 0 16px;
    border: none;
    border-radius: 6px;
    font-size: 13px;
    font-weight: 500;
    cursor: pointer;
    transition: all 0.3s ease;
  }

  .abnormal-search-panel .query-btn {
    background: linear-gradient(135deg, #2979ff 0%, #1e5fcc 100%);
    color: #fff;
  }

  .abnormal-search-panel .query-btn:hover {
    background: linear-gradient(135deg, #5393ff 0%, #2979ff 100%);
    transform: translateY(-1px);
    box-shadow: 0 4px 12px rgba(41, 121, 255, 0.3);
  }

  .abnormal-search-panel .reset-btn {
    background: linear-gradient(135deg, #3a5a8a 0%, #2a4a7a 100%);
    color: #fff;
  }

  .abnormal-search-panel .reset-btn:hover {
    background: linear-gradient(135deg, #5a7aa4 0%, #3a5a8a 100%);
    transform: translateY(-1px);
  }

  /* 表格面板样式 */
  .abnormal-table-panel {
    background: #1c2d5a;
    margin: 15px 0px;
    border-radius: 8px;
    overflow: hidden;
    flex-grow: 1;
    min-height: 0;
    border: 1px solid #3a5a8a;
  }

  /* 异常明细表格样式 */
  :deep(.abnormal-table-panel .el-table) {
    background-color: transparent;
    --el-table-border-color: #3a5a8a;
    --el-table-header-bg-color: #2a5caa;
    --el-table-header-text-color: #fff;
    --el-table-tr-bg-color: #0f2142;
    --el-table-row-hover-bg-color: #183153;
    --el-table-text-color: #c0c4cc;
    --el-table-border: none;
  }

  :deep(.abnormal-table-panel .el-table__header-wrapper th.el-table__cell) {
    background: linear-gradient(135deg, #2a5caa 0%, #1e3a6f 100%) !important;
    color: #fff !important;
    font-weight: bold;
    border: none;
    position: relative;
  }

  :deep(.abnormal-table-panel .el-table__header-wrapper th.el-table__cell::after) {
    content: '';
    position: absolute;
    bottom: 0;
    left: 0;
    right: 0;
    height: 2px;
    background: linear-gradient(90deg, transparent 0%, #2979ff 50%, transparent 100%);
  }

  :deep(.abnormal-table-panel .el-table__body td.el-table__cell) {
    background-color: #0f2142;
    border: none;
    transition: all 0.3s ease;
  }

  :deep(.abnormal-table-panel .el-table__body tr:hover td.el-table__cell) {
    background-color: #183153 !important;
    transform: scale(1.01);
  }

  :deep(.abnormal-table-panel .el-table__body tr.current-row td.el-table__cell) {
    background-color: #263451 !important;
    color: #fff !important;
  }

  /* 条纹行样式 */
  :deep(.abnormal-table-panel .el-table__body tr.abnormal-stripe-row td.el-table__cell) {
    background-color: #142a52;
  }

  :deep(.abnormal-table-panel .el-table__body tr.abnormal-stripe-row:hover td.el-table__cell) {
    background-color: #1a3a62 !important;
  }

  /* 缺陷代码高亮样式 */
  .defect-code-high, .defect-class-high {
    color: #ff4d4f !important;
    font-weight: bold;
    background: rgba(255, 77, 79, 0.1);
    padding: 2px 6px;
    border-radius: 4px;
    border: 1px solid rgba(255, 77, 79, 0.3);
  }

  .defect-code-normal, .defect-class-normal {
    color: #67c23a;
    font-weight: 500;
  }

  /* 异常红色文本 */
  :deep(.abnormal-table-panel .el-table__cell.abnormal-red-text) {
    color: #ff4d4f !important;
    font-weight: bold;
  }

  /* 分页面板样式 */
  .abnormal-pagination-panel {
    background: linear-gradient(135deg, #1c2d5a 0%, #142a52 100%);
    padding: 15px 20px;
    border-top: 2px solid #3a5a8a;
    display: flex;
    justify-content: flex-end;
    align-items: center;
    flex-shrink: 0;
  }

  /* 异常明细分页样式 */
  :deep(.abnormal-pagination-panel .el-pagination) {
    --el-pagination-bg-color: #0a1a3a;
    --el-pagination-text-color: #c0c4cc;
    --el-pagination-button-disabled-bg-color: #183153;
    --el-pagination-button-color: #c0c4cc;
    --el-pagination-button-disabled-color: #6c757d;
    --el-pagination-hover-color: #2979ff;
    --el-color-primary: #2979ff;
  }

  :deep(.abnormal-pagination-panel .el-pagination__total) {
    color: #c0c4cc;
    margin-right: 15px;
    font-weight: 500;
  }

  :deep(.abnormal-pagination-panel .el-pagination button),
  :deep(.abnormal-pagination-panel .el-pager li) {
    min-width: 32px;
    height: 32px;
    padding: 0 8px;
    margin: 0 3px;
    background: linear-gradient(135deg, #0a1a3a 0%, #142a52 100%);
    border: 1px solid #3a5a8a;
    border-radius: 6px;
    color: #c0c4cc;
    font-size: 13px;
    transition: all 0.3s ease;
  }

  :deep(.abnormal-pagination-panel .el-pager li.is-active) {
    background: linear-gradient(135deg, #2979ff 0%, #1e5fcc 100%);
    border-color: #2979ff;
    color: #fff;
    transform: scale(1.05);
  }

  :deep(.abnormal-pagination-panel .el-pagination button:not(:disabled):hover),
  :deep(.abnormal-pagination-panel .el-pager li:hover) {
    color: #2979ff;
    border-color: #2979ff;
    transform: translateY(-1px);
    box-shadow: 0 2px 8px rgba(41, 121, 255, 0.2);
  }

  :deep(.abnormal-pagination-panel .el-pagination button:disabled) {
    background: #183153;
    color: #6c757d;
    border-color: #3a5a8a;
    opacity: 0.6;
  }

  /* 滚动条样式 */
  :deep(.abnormal-table-panel .el-table__body-wrapper) {
    scrollbar-width: thin;
    scrollbar-color: #3a5a8a #142a52;
  }

  :deep(.abnormal-table-panel .el-table__body-wrapper::-webkit-scrollbar) {
    width: 8px;
    height: 8px;
  }

  :deep(.abnormal-table-panel .el-table__body-wrapper::-webkit-scrollbar-track) {
    background: #142a52;
    border-radius: 4px;
  }

  :deep(.abnormal-table-panel .el-table__body-wrapper::-webkit-scrollbar-thumb) {
    background: linear-gradient(135deg, #3a5a8a 0%, #2979ff 100%);
    border-radius: 4px;
    border: 2px solid #142a52;
  }

  :deep(.abnormal-table-panel .el-table__body-wrapper::-webkit-scrollbar-thumb:hover) {
    background: linear-gradient(135deg, #5a7aa4 0%, #5393ff 100%);
  }

  /* 表格行进入动画 */
  :deep(.abnormal-table-panel .el-table__body tr) {
    animation: rowSlideIn 0.3s ease-out;
  }

  @keyframes rowSlideIn {
    from {
      opacity: 0;
      transform: translateX(-20px);
    }
    to {
      opacity: 1;
      transform: translateX(0);
    }
  }

  /* 按钮点击效果 */
  .abnormal-search-panel .btn:active {
    transform: translateY(1px) scale(0.98);
  }

  /* 表格单元格悬停效果增强 */
  :deep(.abnormal-table-panel .el-table__body tr:hover) {
    box-shadow: 0 4px 12px rgba(41, 121, 255, 0.15);
  }

  /* 分页按钮点击效果 */
  :deep(.abnormal-pagination-panel .el-pagination button:active),
  :deep(.abnormal-pagination-panel .el-pager li:active) {
    transform: scale(0.95);
  }

  /* 输入框聚焦效果增强 */
  .abnormal-search-panel .custom-input:focus {
    border-color: #2979ff !important;
    box-shadow: 0 0 0 3px rgba(41, 121, 255, 0.15) !important;
    transform: translateY(-1px);
  }

  /* 表格头部装饰线 */
  :deep(.abnormal-table-panel .el-table__header-wrapper) {
    position: relative;
  }

  :deep(.abnormal-table-panel .el-table__header-wrapper::after) {
    content: '';
    position: absolute;
    bottom: 0;
    left: 0;
    right: 0;
    height: 3px;
    background: linear-gradient(90deg, transparent 0%, #2979ff 25%, #00ff88 50%, #2979ff 75%, transparent 100%);
    border-radius: 0 0 8px 8px;
  }

/* ... Rest of styles ... */
</style>
